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

我有一系列定制的V形元素，我将在我的网站上用作按钮。我已经成功地设置了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形中删除“selected”属性，然后最后一行将只添加类

---

我做错了什么？

jsidle:

只需使用

not（）

，将单击的项从类删除中排除即可：

将此修复应用于您自己的JSFIDLE（顺便说一句，看起来很酷），您会得到以下结果：

JSFiddle:

编辑。我没有仔细阅读这个问题。很抱歉我已经通过单击两次编辑了要取消选择的代码

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');
    });
});

---

你能为这个代码提供JSFIDLE吗我不确定，但也许可以通过这样做

$（'#chevrons.selected'）。removeClass（'selected'）您不再允许jQuery选择器选择该雪佛龙，可能会更改为
$（this）.removeClass（'selected'）
将修复它…感觉可能与
removeClass（'selected'）
和
toggleClass（'selected'）
发生冲突，因为它们的目标是相同的元素。是的，如果首先删除所有
selected
类，则当前元素不能拥有该类，因此
.toggleClass（）
将始终只添加它。你需要将功能一分为二，只有在元素还没有的时候才添加类。谢谢@Juhana，我想可能就是这样。你知道我是怎么把它一分为二的吗？点击所选项目并不会关闭选择（这是指定的目标）。对不起，我只是意识到我没有仔细阅读问题，错过了那部分。将编辑答案。已编辑的答案。谢谢@TrueBlueAussie再次感谢@TrueBlueAussie，今天我的比赛还没到高潮。太好了，谢谢你的帮助。我保证我不会在实际应用中使用这些颜色！
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');
    });
});