Question

我希望切换列表项类的可见性，并切换所有列表项的可见性。在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/

Answer 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/

Answer 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/

我如何“切换所有”，并切换特定的元素类？

2 个答案: