Question

我是JQuery和Javascript的新手，我正在使用JQueryUI ProgressBar，每次有人点击按钮时，进度条都会动画并填满。有没有办法跟踪哪些按钮已被按下以防止按钮再次触发事件？

当前HTML：

   <ul>
     <li><a href="left/section1.html" target="leftcontainer" onClick="updateBar();window.presentation.location.href='right/section1/page1.html';;return true;">overview</a></li> 
     <li><a href="left/section2.html" target="leftcontainer" onClick="updateBar();window.presentation.location.href='right/section1/page1.html';;return true;">key features</a></li>
     <li><a href="#" onClick="updateBar()">customers</a></li>
     <li><a href="#" onClick="updateBar()">accessories</a></li>
     <!--<li><a href="#">nav5</a></li>
     <li><a href="#">nav6</a></li> -->
    </ul>

当前的JQuery / JavaScript：

var percentage = 0;                                                     

function updateBar() 
{
    percentage += 25;                                                               
    $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500)       
    $('.middle').progressbar('option','value', percentage);                         

    if(percentage > 100)                                                            
    {
        $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);            
    }
}

$(function() {
    $('.middle').progressbar({                                          
        value: percentage,                                              
        complete: function() { alert('The progress bar is full'); }     
    });

Answer 1

我会在JavaScript中绑定click事件并使用jQuery .one()方法。

documentation

基本上，一种方法允许您绑定一个只能触发一次的事件，例如点击事件。

<强> Live Demo

var percentage = 0;                                                     

$('ul li a').one('click', updateBar);

function updateBar() 
{
    percentage += 25;                                                               
    $('#test').text(percentage);
}

Answer 2

HTML（添加一个类）：

 <li><a href="#" class='clickable'>customers</a></li>
 <li><a href="#" class='clickable'>accessories</a></li>

JS

var percentage = 0;                                                     

$(function() {
    $('.clickable').click(function updateBar(){
        $(this).unbind('click'); //dont allow click again
        percentage += 25;                                                               
        $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500);       
        $('.middle').progressbar('option','value', percentage);                         

       if(percentage > 100)                                                            
       {
           $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);            
       }
    });

    $('.middle').progressbar({                                          
        value: percentage,                                              
        complete: function() { alert('The progress bar is full'); }     
    });
 });

如何确保按钮事件只在Javascript / JQuery中触发一次？

2 个答案: