jQuery - birden seçimlere dayalı göstermek / gizlemek div

2 Cevap php

Ben üstündeki etiketleri görüntüleme kulüpler (php / html / jquery / css) sayfası (örneğin, yeşil, beyaz, meyve, sebze) var

Sayfada ben divs sınıfları uygun şekilde işaretlenmiş var:

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

vb

Ben etiketleri göstermek / gizlemek değiştiriliyor edildiği dayalı / hide divs göstermek istiyorum.

Varsayılan olarak her şey gösterilir. Üstünde bir etiketi tıklatarak gelen divs geçiş olacaktır.

Zor kısmı kendi sınıflarının herhangi bir 'gösteri' konumuna getirildiğinde ise divs göstermek ve all kendi sınıflarının gizlemek için toggled eğer gizlemektir.

Ben muhtemelen olması gerekenden daha bu zor yapıyorum. Tavsiye için teşekkürler!

2 Cevap

Eğer etiketleri değiştirmek için düğmeleri kullanarak konum olduğunu varsayarsak:

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

Bu çalışması gerekir:

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

Demo bakın: http://jsbin.com/omota

Ilk gizlemek ve ardından göstermek, bu hile yapmak gerekir.

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

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

etiketler