我試圖讓點擊只工作4次，然後不工作，但我不確定我做錯了什麼？

Question

我試圖讓點擊只工作4次，然後o相反，一旦完成，雖然我不確定我做錯了什麼？

$(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); 
    } 
}); 

EXAMPLE

Answer 3

就這樣也許：

$(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... 
     } 
    }); 
}); 

Answer 4

文檔準備功能只調用一次，所以你永遠不會循環槽您如果（我< 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++; 
    });