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

Question

我有一系列自定义 Chevron 元素，将用作我网站上的按钮。我设法设置了 jQuery，以便为单击的 V 形/按钮提供 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 形中删除“选定”属性，然后最后一行只会添加该类。

我在这里做错了什么？

Answer 1

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

使用not()从类移除中排除点击的项目：

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

将此修复应用到您自己的 JSFiddle（顺便说一句，看起来很酷），您会得到：

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

Answer 2

JSFiddle： http://jsfiddle.net/gopj0hyj/

编辑。我没有仔细阅读这个问题。对不起。我已经编辑了代码以通过单击两次来取消选择。

jQuery(function ($) {

    // Variables are your friends - the $ preface tells us its a jQuery object
    var $chevrons = $("#chevrons");
    var $buttons = $chevrons.find('a');
    var $show_all = $('#show_all');

    // We bind a handler to the parent $chevrons element
    // this is good for performance 
    // It will also bind the handler to elements dynamically added with ajax.
    $chevrons.on('click', 'a', function(e){
        var $old_selection = $buttons.filter('.selected');
        var $clicked = $(this);

        // Ensure that no button is selected
        $buttons.removeClass('selected');

        // Checks if button already was selected.
        if ($clicked.get(0) !== $old_selection.get(0)) {
            // select the clicked button
            $clicked.addClass('selected');
        }

        $show_all.removeClass('active');
        // prevents the browser from scrolling to top.
        e.preventDefault();
    });

    $show_all.on('click', function(){
        $buttons.removeClass('selected');
        $(this).addClass('active');
    });
});