버튼 클릭시 부트 스트랩 진행 표시 줄 늘림

Question

클릭하면 진행률 표시 줄의 값을 점차 늘리고 싶습니다. 하나의 버튼을 클릭하면 33 %의 진행률 막대 값, 두 개의 버튼 67 %, 세 개의 버튼 100 %를 클릭하는 것과 같습니다. 본질적으로 다음과 같이 : http://www.somawater.co/ksshare/

각 단추를 클릭하여 진행률 막대의 값을 설정하는 방법을 알았지 만 점진적 값을 추가하는 대신 클릭 할 때마다 다시 설정됩니다. 여기에 내 코드의 다음 http://www.somawater.co/ksshare/ 페이지

jQuery(function ($) { 
$('#code1').click(function() { 
    var val = 33 + '%'; 
    $('.progress-bar').width(val).text(val) 
}) 
}); 

jQuery(function ($) { 
$('#code2').click(function() { 
    var val = 34 + '%'; 
    $('.progress-bar').width(val).text(val) 
}) 
}); 

jQuery(function ($) { 
$('#code3').click(function() { 
    var val = 33 + '%'; 
    $('.progress-bar').width(val).text(val) 
}) 
}); 

JS 우아한 예 것으로 보인다

<div class="progress progress-striped active"> 
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
<span class="sr-only">0% Complete (success)</span> 
</div> 
</div> 

     <div class="main-action row"> 

      <div class="col-md-4 col-sm-4"> 
      <button id="code1" type="button" class="btn btn-lg btn-block btn-warning"><i class="fa fa-facebook"></i>&nbsp; &nbsp; Share</button> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
      <button id="code2" type="button" class="btn btn-lg btn-block btn-info"><i class="fa fa-twitter"></i>&nbsp; &nbsp; Tweet</button> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
      <button id="code3" type="button" class="btn btn-lg btn-block btn-success"><i class="fa fa-play"></i>&nbsp; &nbsp; Watch</button> 
      </div> 

     </div> 

JS하지만 부트 스트랩 프레임 워크로 번역하는 방법을 알아낼 수 없습니다

$(function() { 
var clicks = 0; 
$('button').on('click', function() { 
    clicks++; 
    var percent = Math.min(Math.round(clicks/3 * 100), 100); 
    $('.percent').width(percent + '%'); 
    $('.number').text(percent + '%'); 
}); 

마지막으로, 코드를 보면 누군가가 버튼을 클릭 할 때 동일한 '공유'js 팝업을 구현할 수 있습니까? 고맙습니다!

Answer 1

위의 예제는 거의 거기에 있습니다 ....하지만 한 번의 변경 ('button') 클릭 이벤트는 클릭 한 모든 버튼에서 트리거되므로 다음과 같이 변경하십시오. 그것은 클래스입니다 (버튼) ...

$(function() { 
var clicks = 0; 
$('.code-button').on('click', function() { 
    clicks++; 
    var percent = Math.min(Math.round(clicks/3 * 100), 100); 
    $('.progress-bar').width(percent + '%').text(percent + '%'); 
}); 
}); 

가 어떻게되는지 참조하십시오. 당신은 아마 조금 더 펑키를 얻고이를 클릭 한 후 버튼을 비활성화 할 것입니다 ...하지만 당신은이를 처음 사용하는 경우