javascript - 为什么我的 jQuery 不允许我切换类？

Question

我有一系列自定义 V 形元素，我将在我的网站上用作按钮。我设法设置了 jQuery，以便为单击的人字形/按钮提供一个 class="selected"，然后我用它来添加自定义样式。如果我单击任何其他 V 形，则所选类将从第一个 V 形中删除并添加到最后一个被单击的 V 形中。所有这一切都很好。我有另一个链接，可以单击该链接以从所有 V 形中删除该类。我现在要做的是在 jQuery 上启用 .toggle(Class) 函数，这样我也可以通过单击相同的元素两次来删除 class="selected"。

我的 jQuery 代码:

$(function () {
$('#chevrons > ul > li > a').click( function(){
    $('#chevrons .selected').removeClass('selected');
    $('#show-all').removeAttr("style");
    $(this).toggleClass('selected');
   });
});

$(function () {
    $('#show-all').click( function(){
      $('#chevrons .selected').removeClass('selected');
      $(this).css('color', '#FECF2A');
    });
});

我试过没有行的切换:

$('#chevrons .selected').removeClass('selected');
    $('#show-all').removeAttr("style");

而且效果很好。我假设(可能不正确)jQuery 将逐行执行，因此最后执行。但也许上面的第一行是从所有 V 形中删除“selected”属性，然后最后一行将只添加类。

我在这里做错了什么？

Answer 1

JSFiddle: http://jsfiddle.net/oqs4nycj/1/

只需使用 not() 从类删除中排除点击的项目:

    $('#chevrons .selected').not(this).removeClass('selected');

将此修复应用到您自己的 JSFiddle(顺便说一下，看起来很酷)您会得到:

http://jsfiddle.net/qsnkqhp8/1/