JQuery - показать / скрыть Div на основе нескольких выборов

Question

У меня есть страница (php / html / jquery / css), где я отображаю теги вверху (например, зеленый, белый, фрукты, овощи)

На странице у меня есть div, помеченные соответствующим образом классами:

<div class="green fruit">apple</div>
<div class="green vegetable">broccoli</div>

и т.д.

Я бы хотел показать / скрыть div в зависимости от того, какие теги были переключены, показать / скрыть.

По умолчанию все отображается. Щелчок по тегу вверху переключит соответствующие элементы div.

Самое сложное - показать div, если любой из его классов переключен на «показ», и скрыть, если все его классов переключены на скрытие.

Я, наверное, все усложняю, чем нужно. Спасибо за ваш совет!

Answer 1

Если вы используете кнопки для переключения тегов:

<button class="tag" id="toggle-fruit">Fruit</button>
<button class="tag" id="toggle-green">Fruit</button>
<button class="tag" id="toggle-vegetable">Fruit</button>
...

Это должно работать:

var divCollection = $('div'),

    // Gather all tags (store in array):
    tags = $.map(divCollection, function(){
        return this.className.split(' ');  
    }),

    // Object to store enabled tags:
    enabledTags = {};

toggleTags();

$('button.tag').click(function(){

    var tag = this.id.split('-')[1];

    enabledTags[tag] = !enabledTags[tag];

    $(this).toggleClass('toggled'); // Maybe add some CSS?

    toggleTags();

});

function toggleTags() {

    // Hide all divs, then show those that have at least one
    // tag present in the enabledTags object.
    divCollection.hide().filter(function(){

        // Return true if one of classes is found in enabledTags
        return !!$.grep(this.className.split(' '), function(){
            return enabledTags[this];
        }).length;

    }).show();
}

См. Демонстрацию: http://jsbin.com/omota

Answer 2

Если сначала спрятать, а потом показать, это должно сработать.

$('#my_divs div').hide();

var tags = ['fruit', 'orange'];
for(var k in tags){
    $('#my_divs div.' + tags[k]).show();
}