javascript - 我试图让点击只工作 4 次，然后不工作，虽然我不确定我做错了什么？

Question

我试图让点击只工作 4 次，然后在完成后反之，虽然我不确定我做错了什么？

 $(document).ready(function(){
   i=0;
   if(i<3){
     $('#nums').click(function(){
       $('#pic').stop().animate({top:'-=384px'},'300');
       i++;
     });        
   }else{
     $('#nums').click(function(){
       $('#pic').stop().animate({top:'+=384px'},'300'); 
     });
   }
});

Answer 1

您应该将 .click 包裹在“if else”周围。像这样的东西：

$(document).ready(function(){
    var i=0;
    $('#nums').click(function(){
    if(i<3){
        $('#pic').stop().animate({top:'-=384px'},'300');
    i++;
        }else{
        $('#pic').stop().animate({top:'+=384px'},'300');    
        }
    });
});

Answer 2

您可以考虑将逻辑放在事件处理程序中：

HTML

<button>test</button>

JavaScript

var timesClicked = 0;

$("button").on("click", function(){
    timesClicked++;

    alert(timesClicked);
    //Insert the code you want to execute when the button is clicked here.


    if(timesClicked >= 4){
        $(this).off("click").prop("disabled", true);
    }
});

例子

Answer 3

文档就绪函数只调用一次，所以你永远不会循环通过你的 if(i<3) 而是一次。您应该将条件设置为您的点击功能，如下所示：

    var i=0;
    $('#nums').click(function(){
         console.log('click', i);
         if(i<3){
              $('#pic').stop().animate({top:'-=384px'},'300');
              i++;
         }else{
              $('#pic').stop().animate({top:'+=384px'},'300');    
         }
   });

我什至会建议这样的东西：

    var i=0;
    $('#nums').click(function(){
        console.log('body click', i);
        var target_top = (i < 3) ? '-=384px' : '+=384px';
        $('#pic').stop().animate({top: target_top},'300');
        i++;
    });

Answer 4

就像这样可能：

$(document).ready(function () {
    var i = 0;
    $('#nums').click(function () {
        if (i < 3) {

            $('#pic').stop().animate({
                top: '-=384px'
            }, '300');
            i++;
        } else {
            $('#pic').stop().animate({
                top: '+=384px'
            }, '300');
           //$(this).off('click');// you could want to unbind it or not, i don't know...
        }
    });
});