我如何“切换所有”，以及切换特定类别的元素？答案

【问题标题】：How do I "toggle all", and also toggle specific classes of elements?我如何“切换所有”，以及切换特定类别的元素？
【发布时间】：2014-01-23 22:47:44
【问题描述】：

我想切换列表项类别的可见性并切换所有列表项的可见性。在another stack overflow post 的帮助下，我可以切换特定类别的列表项。

这是我拥有的用于切换特定类别的列表项的 Javascript：

var switcher = [false, false, false];
var classes = ['easy', 'fun', 'silly'];

$('.toggler').click(function () {
    var x = $(this).hasClass('checked');
    switcher[$(this).data('switch')] = !x;
    $(this).toggleClass("checked", !x);
    $('li').each(function () {
        var cur = $(this);
        cur.addClass('hidden');
        $.each(switcher, function (index, data) {
            if (data && cur.hasClass(classes[index])) {
                cur.removeClass('hidden');
            }
        });
    });
});

我添加了隐藏和显示所有列表项的基本功能，但该功能会阻止单个类切换：

$('.select_all').click(function () {
    $(".toggler").toggleClass("checked");
    $('li').toggleClass("hidden");
});

如何保持类切换，并添加另一个切换所有项目的按钮？

这是一个小提琴示例：http://jsfiddle.net/BMT4x/1/

【问题讨论】：

标签： javascript jquery html logic toggle

【解决方案1】：

我不确定这是否正是您想要做的，但它应该会推动您朝着正确的方向前进（至少是我要走的方向）。我更喜欢用类来切换一切。类似的东西：

<button class="toggler" data-class="easy">Easy</button>,
<button class="toggler" data-class="fun">Fun</button>,
<button class="toggler" data-class="silly">Silly</button>,
<button class="toggler" data-class="all">Select All</button>


<ul id="list">
    <li class="easy">Bowling</li>
    <li class="fun">Balooning</li>
    <li class="fun easy">Boating</li>
    <li class="silly">Barfing</li>
    <li class="easy fun">Bafooning</li>
</ul>

CSS：

#list li {
    display: none;
}
#list.easy li.easy {
    display: block;
}
#list.fun li.fun {
    display: block;
}
#list.silly li.silly {
    display: block;
}
#list.all li {
    display: block;
}

JS：

$('.toggler').click(function () {
    var category = $(this).data('class');
    $('#list').toggleClass(category);
});

还有一个小提琴供参考：http://jsfiddle.net/qLLYj/

【讨论】：

我想您可能忘记将“all”类添加到li 元素？
@VIDesignz 好吧，如果它展示了所有这些......他们不需要上课哈哈。
我只是说切换所有按钮不会根据您的脚本执行任何操作。就是这样……
@VIDesignz 是的...#list.all li { display: block; }
哦..我明白了！我想我希望“切换全部”按钮在单击（来回）时显示所有内容或隐藏所有内容。我的坏

【解决方案2】：

您可以通过将第二个 switch 参数传递给 toggleClass (see here) 来显式添加/删除一个类。

因此，您可以在单击.select_all 按钮时更改所有单个开关和列表项的状态。

$('.select_all').click(function () {
    $('.select_all').toggleClass("checked");
    var allChecked = $('.select_all').hasClass("checked");
    switcher = [allChecked, allChecked, allChecked];
    $(".toggler").toggleClass("checked", allChecked);
    $('li').toggleClass("hidden", !allChecked);
});

进行了一些进一步的更改以获得更直观的行为（例如，如果全部选中，单击其中一个切换会取消选择 .select_all 以及它本身；选中所有单个切换意味着自动选中 .select_all）：

$('.toggler').click(function () {
    var x = $(this).hasClass('checked');
    switcher[$(this).data('switch')] = !x;
    $(this).toggleClass("checked");
    $('li').each(function () {
        var cur = $(this);
        cur.addClass('hidden');
        $.each(switcher, function (index, data) {
            if (data && cur.hasClass(classes[index])) {
                cur.removeClass('hidden');
            }
        });
    });

    var allChecked = switcher.indexOf(false) < 0;
    $('.select_all').toggleClass("checked", allChecked);
});

小提琴：http://jsfiddle.net/ET33B/

【讨论】：