Question

我有一个（php / html / jquery / css）页面，我在顶部显示标签（例如绿色，白色，水果，蔬菜）

在页面上，我的div标记为适当的类：

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

等

我想基于哪些标签切换显示/隐藏来显示/隐藏div。

默认显示所有内容。单击顶部的标签将切换相应的div。

棘手的部分是显示div，如果它的任何类被切换为'show'并隐藏，如果所有的类被切换为隐藏。

我可能比实际需要的更难。谢谢你的建议！

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

jquery - 根据多个选择显示/隐藏div

2 个答案: