防止在jquery中单击多个点击！

我有这个JavaScript代码：防止在jquery中单击多个点击！

var next = jQuery('#next') ; 
     var prev = jQuery('#prev') ; 
     var Scroller = jQuery('#Scroller') ; 
     var ScrollerTable = Scroller.children('table').width() ; 
     next.click(function(){ 
     console.log('width of scroller table ' + ScrollerTable) ; 
       var offsetLeft = parseInt(Scroller.css("left")) ; 
       console.warn(offsetLeft) ; 
       if(offsetLeft == 0) 
       { 
        Scroller.animate({left : -140 } , 1000) ; 
       }else{ 
        console.warn(offsetLeft) ; 
        if(ScrollerTable <= offsetLeft ) 
        { 
         console.warn(offsetLeft) ; 
         alert('you are reached the end of scroller use the other btn') ; 
         return false ; 
        }else{ 
         Scroller.animate({left : offsetLeft-140 } , 1000) ; 
        } 
       } 

     }); 
     prev.click(function(){ 

       var offsetLeft = parseInt(Scroller.css("left")) ; 
       console.warn('offsetLeft in backward ' + offsetLeft) ; 
       if(offsetLeft != 0 || offsetLeft > 0) 
       { 
        Scroller.animate({left : offsetLeft +140 } , 1000) ; 
       }else{ 
        jQuery(this).css('cursor' , 'none') ; 
        return false ; 
       } 
     });

当上一个或下PERV多个动画用户点击不会完全完成，offsetLeft值不正确！我能做些什么来防止这种情况

我的第二个问题是当用户点击下一个btn滚动div滚动到-140px左边这个动作必须迭代直到达到幻灯片结束然后我必须禁用下一个btn。所以我得到一个变量的ScrollerTable宽度，并检查它与offsetLeft值，但它不工作！

，这里是HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td> 
     <div style="border:#ccc 1px solid ; padding:1px" class="scroll"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
       <td width="2%"><img src="../images/dum/scroll_left.gif" width="20" height="165" id="prev" style="cursor:pointer" /></td> 
       <td width="96%" valign="top"> 
        <div style="width:720px; height:165px ; position:relative ; overflow:hidden " id="Container"> 
         <div style="position:absolute ; left:0" id="Scroller"> 
          <table cellpadding="0" cellspacing="0" border="0"> 
           <tr> 
            {foreach from=$products item=p} 
             <td> 
              <div style="border:#ccc 2px solid ; padding:0px;margin:20px;"> 
               <img src="imgsize.php?w=100&h=100&img=../uploads/product/{$p.xproductid}.jpg" /> 
               <div style="background-color:#ccc ;text-align:center ; padding:5px; ">{$p.xproductname}</div> 
              </div> 
             </td>  
            {/foreach} 
           </tr> 
          </table> 
         </div> 
        </div> 
       </td> 
       <td width="2%"><img src="../images/dum/scroll_right.gif" width="20" height="165" id="next"/></td> 
       </tr> 
      </table>

来源

2009-06-19 mehdi

将问题分成两部分会更好。 – kgiannakakis 2009-06-19 13:36:48

最好使用有效的HTML，避免嵌套表格，并且不要滥用表格进行布局。 – Quentin 2009-06-19 13:47:38

如果我理解你的权利，你可以介绍一些变量，可以帮助你。

var nextInProgress=false; 
var prevInProgress=false;

然后，你可以做这样的事情：

next.click(function(){ 
    if(!nextInProgress){ 
     nextInProgress=true; 
     ... 
     nextInProgress=false; 
    } 
}); 
prev.click(function(){ 
    if(!prevInProgress){ 
     prevInProgress=true; 
     ... 
     prevInProgress=false; 
    } 
});

然后，当你next.click（）或prev.click（）函数都在进步，再次单击该按钮将用户除非行动已经完成，否则不会产生任

至于你的第二个问题：你使用jQuery element.width（）函数吗？如果这没有给你一个期望的值，你可能需要做一些其他的宽度计算，比如确定CSS左和CSS右属性值，然后减去左右来得到宽度。这可能有用，但也许我误解了你的问题。

来源

2009-06-19 13:44:02 Carl

@Carl听起来很不错，但不起作用！坦克 – mehdi 2009-06-19 14:57:58

如果您想使用自己的代码，请考虑在您的动画调用中使用回调参数。

在按钮的单击事件：

禁用左键（与 .attr（ “禁用”， “已禁用”）或一些其他法）
触发动画
回调参数 .animate（）重新启用按钮。在动画结束之前，回调函数将不会执行，直到。（如果您有更复杂的动画，你可以需要使用一个动画队列。）

或者，你可以只使用阿里尔Flesler的serialScroll plugin，因为他所做的辛勤工作了。

来源

2009-06-19 13:56:51 ScottyDont

防止在jquery中单击多个点击！

回答

相关问题