Question

好的，所以我试图通过更改元素的id并将两个不同的函数应用于不同的id来启动/停止setInterval函数。这是目前的代码：

$(document).ready(function(){
  var seq
  $('#start').click(function(){
     $(this).attr('id','stop');
     seq=self.setInterval(function(){blah()},125);
  });
  $('#stop').click(function(){
     $(this).attr('id','start');
     clearInterval(seq);
  });
});

当我单击#start元素时，setInterval启动并且id变为#stop，但是如果我再次单击（在现在称为#stop的元素上），则执行#start的代码（添加另一个setInterval））感谢

函数'blah'只是一个组成函数的例子

Answer 1

当你说：

$('some selector').click(...

将点击处理程序绑定到当时与some selector 匹配的所有元素 - 它不会自动应用于将来可能与之匹配的元素。

要让处理程序应用于click事件时与选择器匹配的元素，您需要使用委托事件处理程序，这意味着将处理程序附加到父元素（如果元素，则附加到document没有静态父母）：

$(document).ready(function(){
    var seq
    $(document).on('click', '#start', function(){
        $(this).attr('id','stop');
        seq=self.setInterval(function(){blah()},125);
    });
    $(document).on('click', '#stop', function(){
        $(this).attr('id','start');
        clearInterval(seq);
    });
});

.on() method允许您附加“普通”非委派处理程序或委派处理程序，具体取决于您传递给它的参数。

另一个选项是不更改id，只需使用单击处理程序以某种方式测试当前状态：

$(document).ready(function(){
  var seq;
  $('#start').click(function(){
     if (seq) {
        clearInterval(seq);
        seq = null;
     } else
        seq=self.setInterval(function(){blah()},125);
  });
});

Answer 2

我不会更改id，因为这不会更改事件绑定。通常不应该更改元素id标记。更好的计划（至少对我而言）是将其设置为一个类。然后使用html数据标签来决定状态。

<button type="button" class="buttonClass" data-state="start">Button Text</button>

$(document).ready(function(){
  var seq
  $('.buttonClass').click(function(){
     var state = $(this).data('state');
     if(state=='start') {
         //do start interval stuff
         seq=self.setInterval(function(){blah()},125);
         $(this).data('state','stop'); //Change the state now
     } else if(state=='stop') {
         //do stop interval stuff
         clearInterval(seq)
         $(this).data('state','start'); //Change the state again
     }
  });
});

Answer 3

为什么不直接检查这样的状态（不需要向文档添加事件监听器）：

$(document).ready(function(){
    var seq;
    $('#start').on('click', function(){
        if(!$(this).hasClass('running')){
            seq=self.setInterval(function(){blah()},125);
            $(this).addClass('running');
        }
        else{
            $(this).removeClass('running');
            clearInterval(seq);
        }
    });
});

将函数应用于动态内容javascript / jquery

3 个答案: