CODEWITHSUNDEEP
jqueryhtmlcss
Cybercampbell
Cybercampbell

Reputation: 2606

jquery hide or show groups of images

kinda stuck on this and looking for some advice.

I have a partical scirpt that when text in my menu is selected at add the class itemSelect then if selected again it removes the class...this is all working fine. there is also an ALL option that removes the class from all other menu items.

Again this is all working fine (thanks @Keith.Abramo).

The bit im stuck on is when an item is selected I need to hide and/or show images in a different list.... these images are chosen based on tags in the data-tags attribute.

so if if I unselect ITEM 1: <li class=""><a href="#" rel="fe">ITEM 1</a></li>

which has the rel fe all images that have fe in the data-tags attribute will hide unless of coarse that have other data-tags that are still selected (with the class itemSelect in the menu list).

I hope this makes sence :-S

Everything I have so far is here: http://jsfiddle.net/CmSjZ/

I have tried this myself but only messed things up and didn't know how to manage the multiple tags.

Any help on this will be much appreciated.

C

Upvotes: 1

Views: 394

Answers (3)

Moe Sweet
Moe Sweet

Reputation: 3721

First, bind click event to all li's. Then get rel of each li. Get img to show according to rel. Show it.

$('li').click(function(){
// Do your item select stuff here
tag = $(this).attr('rel');

$('img[data-tags="'+tag+'"]').show();
});

Upvotes: 0

Jayendra
Jayendra

Reputation: 52769

Example - http://jsfiddle.net/CmSjZ/9/

This should show and hide the images as per the data-tags -

$('.images li').hide();
$('.my-menu ul.menu li.itemSelect').each(function () {
    var rell = $(this).find('a').attr('rel');
    $('.images li').filter(function (index) {
         return $.inArray(rell,$(this).attr('data-tags').split(' ')) != -1
    }).show();
});

Upvotes: 0

Guillaume Cisco
Guillaume Cisco

Reputation: 2945

Hey just updated your code to make it works as you want, here is the JsFiddle : http://jsfiddle.net/CmSjZ/6/

I added these lines :

if ($(e).attr("class") == 'itemSelect')
            tags += $(e).find('a').attr("rel") + ' ';

and :

$('.my-images ul.images li img').hide();    
    if (tags.indexOf('All') != -1){
        $('.my-images ul.images li img').show();
    }
    else if (tags != ''){
        tags = tags.substr(0,tags.length - 1);
        var arr = tags.split(' ');
        var len = arr.length;
        for (var i = 0;i < len; i++){
            $('.my-images ul.images li[data-tags*="' + arr[i] +'"] img').show();
        }
    }

I'm storing the values of the tags selected in a first time. And just after I'm parsing my tags variable to know what images we need to show without breaking your html architecture ;)

Hope it helps ;)

Upvotes: 1

Related Questions