How do I “toggle all”, and also toggle specific classes of elements?

问题

I want to toggle the visibility of classes of list items and also toggle the visibility of all the list items. With help of another stack overflow post, I am able to toggle specific classes of list items.

Here's the Javascript I have that toggles specific classes of list items:

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

I added the basic functionality to hide and show all the list items, but the function brakes the individual class toggles:

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

How can I keep class toggles, and add another button that toggles all the items?

Here's a fiddle example: http://jsfiddle.net/BMT4x/1/

回答1:

I'm not sure if this is exactly what you're trying to do, but it should give you a push in the right direction (at least the direction I'd go). I prefer toggling everything with classes. Something like:

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

The 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;
}

The JS:

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

And a fiddle for reference: http://jsfiddle.net/qLLYj/

回答2:

You can explicitly add/remove a class by passing a second, switch, parameter to toggleClass (see here).

So, you can change the state of all the individual switches and list items when clicking the .select_all button.

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

Some further changes made to get more intuitive behaviour (e.g. if all checked, clicking one of the toggles deselects .select_all as well as itself; checking all individual toggles means .select_all is automatically checked):

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

Fiddle: http://jsfiddle.net/ET33B/

来源：https://stackoverflow.com/questions/21320946/how-do-i-toggle-all-and-also-toggle-specific-classes-of-elements

标签

javascript

jquery

html

logic

toggle