Question

我从jquery开始，在这里有一个问题：

$('#test.off').click(function(){
    $(this).removeClass('off').addClass('on');
 });
$('#test.on').click(function(){
    $(this).removeClass('on').addClass('off');
    alert('ok');
});

代码的第一部分很顺利，该类是适用的，但是当我在这个元素中附加一个带有新类的事件时，它将不起作用。

有人可以解释我到底是什么问题吗？

我试过javascript， http://jsfiddle.net/R5NRz/

var element = document.getElementById('test');

element.addEventListener('click', function() {
    this.id ='test2';
    alert("ok");
}, false);

var element2 = document.getElementById('test2');

element2.addEventListener('click', function() {
    alert("ok2");
}, false);

并没有真正帮助我，有同样的问题

Answer 1

试

    $(document).on("click",'#test.on',function(){

        $(this).removeClass('off').addClass('on');
        alert('ok');
 });


$(document).on("click",'#test.off',function(){

        $(this).removeClass('off').addClass('on');
        alert('ok passs');
 });

Demo

Answer 2

在您的jQuery示例中，您绑定到当时存在的DOM元素。这就是为什么你看到第一场火，而不是第二场火。这不适合您的＃test; on＆＃39;代码运行时的选择器。你想要做的是使用委托：

$('#test').on('click',function() {
   var ele = $(this);
   if (ele.hasClass('on')) {
    ele.removeClass('on').addClass('off');
   } else {
    ele.removeClass('off').addClass('on');
   }
});

这假设您所做的不仅仅是切换类。如果您只想简单地切换类，那么更简单的解决方案是选择一个作为默认值并使用另一个作为标志。例如，.on已启用，但没有.on它关闭。然后你可以使用切换：

   $('#test').on('click', function() {
      $(this).toggleClass('on');
   });

Answer 3

$("#test.on")

不会绑定任何东西。试试这个：

$('#test').click(function() {   
  if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');   
  else $(this).removeClass('on').addClass('off'); 
});

您可以考虑使用＆＃39;有效＆＃39;而不只是切换，而不是有两个单独的开/关类。然后你可以写：

$("#test").click(function() {
  $(this).toggleClass('active');
});

更改ID或类时，单击事件不起作用

3 个答案: