jquery功能需要額外的一次點擊才能工作

Question

所以，第一個問題是.select必須點擊2次才能執行定時器。選擇任務後，.select獲取文本：「啓動任務！」，點擊時發生變化，功能時鐘應該在啓動之後啓動。選中包含「啓動任務！」文本的文件。和暫停任務一樣。它必須點擊2次。第二個問題是當我試圖通過給taskMins1和taskSeks1的固定值來暫停計時器時，它只會加速倒計時過程。

$(".select").click(function() { 
     $(this).text(function(i, text){ 
     return text === "Start task!" ? "Pause task!" : "Start task!"; 
     }) 
    }); 
    var taskMins1 = $(this).siblings('.task-time').children('.minutes').text(); 
      var taskSeks1 = $(this).siblings('.task-time').children('.seconds').text(); 
      $('.select').click(function(){ 
       if($('.select').text() == 'Start task!'){ 
       $('.select').click(function clock(){ 
        $('.task-time-left').html(taskMins1 + ":" + taskSeks1) 
        taskSeks1--; 
        if(taskSeks1 <10 && taskSeks1 >= 0){taskSeks1="0" + taskSeks1} 
        if(taskSeks1 < 0){taskSeks1 = 59, taskMins1 = taskMins1 - 1} 
        $('.task-time-left').html(taskMins1 + ":" + taskSeks1) 
        setTimeout(clock, 1000) 
       }); 
       } 
       else{ 
        $('.task-time-left').html(taskMins1 + ":" + taskSeks1) 
       } 
      }) 

Answer 1

它看起來像你設置文本='開始任務！'在第一次點擊，那麼你的第二次點擊條件的值爲true：

text === "Start task!" 

這是初始化頁面加載文本值來完成你想要什麼的問題。我假設你想確保文本最初是「開始任務！」。

Answer 2

你的代碼中有幾個問題。首先，你在你的代碼兩次設置click處理程序.select：

$(".select").click(function() { 
    ... 
}); 
var taskMins1 = $(this).siblings('.task-time').children('.minutes').text(); 
var taskSeks1 = $(this).siblings('.task-time').children('.seconds').text(); 
$('.select').click(function() { 
    ... 

這是不是你想要的，你要定義一個點擊處理程序，並結合了代碼。基本上採取的代碼在你第一次click handler

$(this).text(function(i, text){ 
    return text === "Start task!" ? "Pause task!" : "Start task!"; 
}); 

進入第二個。

其次，你失蹤了整個地方的分號。最後，setTimeout必須在單擊處理程序中的單獨函數中定義或存儲在變量中。

你正在尋找不管什麼是setInterval它允許你無限期地執行並與clearInterval停止。

使所有在你的代碼這些變化會是這樣的：

//simplified the fetching of the html elements to keep the html simple 
 
var taskMins1 = $('.minutes').text(); 
 
var taskSeks1 = $('.seconds').text(); 
 

 
let timer; //variable to keep the timer and allow stopping the clock 
 

 
$('.select').click(function() { //only one click handler 
 
    if ($('.select').text() == 'Start task!') { 
 

 
     timer = setInterval(function(){ 
 

 
     if (--taskSeks1 < 0) { 
 
      if (--taskMins1 >= 0) taskSeks1 = 59; 
 
      
 
      if (taskMins1 <0){ //if minutes and seconds are zero stop the timer 
 
       taskMins1 = 0; 
 
       taskSeks1 = 0; 
 
       clearInterval(timer); 
 
      } 
 
     } 
 
     $('.task-time-left').html(taskMins1 + ":" + (taskSeks1 < 10 ? "0" + taskSeks1 : taskSeks1)); 
 
     },1000); 
 
     
 
    } else { 
 
    $('.task-time-left').html(taskMins1 + ":" + (taskSeks1 < 10 ? "0" + taskSeks1 : taskSeks1)); 
 
    clearInterval(timer); //clears the timer to stop the task 
 
    } 
 
    
 
    //the previous first click handler is now here 
 
    $(this).text(function(i, text) { 
 
    return text === "Start task!" ? "Pause task!" : "Start task!"; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="select">Select</button> 
 
<div class="task-time"> 
 
    <div class="minutes">1</div> 
 
    <div class="seconds">12</div> 
 
</div> 
 

 

 
<div class="task-time-left"></div>