javascript - 如何将进度条与 .click 事件 jquery 链接

Question

我想创建一个投票系统。我如何将 .click 事件与进度条链接起来，以便当用户单击按钮时，进度条会同步更新。

这是我的代码

HTML

<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>

查询

$('#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

您需要在投票时重新调用progressbar()。像这样的东西:

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>

Javascript:

$('.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