Question

所以，第一个问题是.select必须被点击2次才能执行计时器。选择任务后，.select获取文本：“启动任务！”，点击后更改，功能时钟应该在.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

您的代码中存在一些问题。首先，您要在代码中为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。

在代码中进行所有这些更改将如下所示：

＆＃13;

//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!";
  });
})

＆＃13;

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

＆＃13;

Answer 2

看起来你设置了text =＆＃39;启动任务！＆＃39;在第一次单击时，第二次单击时的条件将评估为true：

text === "Start task!"

在页面加载时初始化该文本值以实现所需的问题。我假设你想确保文本最初是＆＃34;开始任务！＆＃34;。

jquery函数需要额外的1次点击才能工作

2 个答案: