Question

我有一系列定制的雪佛龙元素，我将在我的网站上用作按钮。我设法设置了jQuery，以便点击的V形/按钮被赋予一个类=＆＃34;被选中＆＃34;然后我用它来添加自定义样式。如果我单击任何其他V形符号，则从第一个V形符号中删除所选类，并将其添加到单击的最后一个V形符号中。所有这一切都很好。我有另一个链接可以点击从所有V形符号中删除该类。我现在要做的是在jQuery上启用.toggle（Class）函数，这样我也可以删除class =＆＃34; select＆＃34;通过单击相同的元素两次。

我的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将逐行执行，因此最后要执行。但也许上面的第一行是删除＆＃34;选择＆＃34;来自所有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');
    });
});

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

2 个答案: