진행률 막대를 .click 이벤트 jquery와 연결하는 방법

Question

투표 시스템을 만들고 싶습니다. .click 이벤트를 진행률 막대와 연결하여 사용자가 단추를 클릭하면 진행률 막대가 동기화되어 업데이트되도록하려면 어떻게해야합니까?

여기에 내 코드

HTML 당신은 투표에 progressbar()를 다시 호출 할 필요가

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

<div class="content"> 
<h3 class="title">Who's better ?</h3> 
<ul> 
    <li class="option" id="option_1" > 
      Messi 
     <p id="score_1">0</p> 
     <div class="progressbar_1"> 
     </div> 
     <br> 
    </li> 
    <br> 
    <li class="option" id="option_2" > 
     Ronaldo 
     <p id="score_2">0</p> 
     <div class="progressbar_2"></div> 
     <br> 
    </li> 
    <br> 
</ul> 
</div> 

jQuery를

$('#option_1').click(function() { 
$('#score_1').html(function(i, num) { return num*1+1}); 
}); 

$('#option_2').click(function() { 
$('#score_2').html(function(i, num) { return num*1+1 }); 
}); 

$(function() { 
$(".progressbar_1").progressbar({value: 50}); 
}); 

$(function() { 
$(".progressbar_2").progressbar({value: 50}); 
}); 

http://jsfiddle.net/h16nhz5c/5/

Answer 1

입니다.

HTML :

<ul> 
    <li class="option" id="option_1"> 
     Messi 

     <p class="score" id="score_1">0</p> 

     <div class="progressbar"> 
     </div> 
    </li> 

    <li class="option" id="option_2"> 
     Ronaldo 

     <p class="score" id="score_2">0</p> 

     <div class="progressbar"> 
     </div> 
    </li> 
</ul> 

자바 스크립트 : 같은 뭔가

$('.option').click(function() { 
    var $this = $(this); 

    // store voting value in data-voting 
    if (!$this.data('voting')) 
     $this.data('voting', 0); 

    var voting = parseInt($this.data('voting'), 10); 
    voting++; 

    $this.data('voting', voting); 
    $this.find('.score').html(voting); 
    $this.find('.progressbar').progressbar({value: voting}); 
}); 

는 Fiddle