添加/删除类时 jQuery 单击功能表现得很奇怪

Question

我有两个列表项，单击它们时，应将类从“.off”更改为“.on”。一次只能有一个元素为“.on”，因此当一个元素已打开并且单击另一个元素时，两个元素都应将类从“.off”更改为“.on”，反之亦然。如果单击类为“.on”的列表项，它应该将类更改为“.off”

我遇到的问题是，当单击类为“.on”的列表项时，它仍然运行单击函数，就好像它一样有一个“.off”类

我的 html：

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

我的 javascript（在 jQuery 1.7.1 上运行）

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

有谁知道这里发生了什么？我的代码有问题还是我在这里遇到了某种错误？

http://jsfiddle.net/ZC3CW/6/

Answer 1

您使用 click() 绑定事件的选择器用于选择要添加事件处理程序的元素。运行处理程序时不考虑选择器。

您应该寻找更像这样的东西：

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

您可能希望通过向 ul 或 li 添加类/id 来使 li 选择器更加明确代码>的。

为了进一步混淆事情，你也可以这样做（如果你使用的是 jQuery > 1.7）；

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

这是因为 .on() 函数的工作原理是将事件处理程序附加到所选元素 (document)，并且只会在事件上执行处理程序（函数）如果事件源自的元素与选择器 .off 在事件触发时（而不是在绑定时）匹配，则指定（click）。

Answer 2

我建议向不同的选择器添加一个点击句柄，这应该适合你......

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});

Answer 3

问题是 jQuery 处理程序在页面加载时附加，并且无论更改其类如何都保持不变。使用 live('click', handler) on('click', handler) 而不是 click()。

编辑：刚刚注意到 .live() 在 jQuery 1.7 中已被弃用。

Answer 4

我看到的问题是，您的“on”类在单击事件发生时并未运行，因此您的 $('.on').click 方法永远不会被调用。

尝试在更改班级后重新分配您的活动（示例如下）：

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

希望这有帮助，

皮特

Answer 5

单击绑定到元素而不是类。
也许您可以将事件附加到

元素并检测/切换元素类：

$('li').click(函数(事件) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    别的 {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});