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

「if else」の周りに .click をラップする必要があります。このようなもの：

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

ドキュメント準備完了関数は 1 回だけ呼び出されるため、if(i<3) を 1 回だけループすることはありません。次のように条件をクリック関数に設定する必要があります。

    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++;
    });