[英]How to link a progress bar with .click event jquery
我想創建一個投票系統。 如何將.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>
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});
});
您需要在投票時重新調用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});
});
見小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.