Question

So this is the code I have:

$('.showvideo').click(function(){ // removes 'show' class from all images that aren't 'vid'
    showAll();
    if($('.gallery li img').hasClass('video')){
        $('.gallery li img').addClass('show').removeClass('hide');
    }
    else{
        $('.gallery li img').addClass('hide').removeClass('show');
    }
});

At the moment it adds the class ‘show’ to all the images within ‘container’, even though only two out of the six have the class ‘video’. How do I only add the class ‘show’ to only those images which have the class ‘video’?

Answer 1

You can add the video class to your individual selector to get just the items you want like this. Assuming the video class is on the img tag itself, it would work like this:

$('.showvideo').click(function(){ // removes 'show' class from all images that aren't 'vid'
    showAll();
    $('.gallery li img.video').addClass('show').removeClass('hide');
    $('.gallery li img').not('.video').addClass('hide').removeClass('show');
});

Or, a little more efficiently:

$('.showvideo').click(function(){ // removes 'show' class from all images that aren't 'vid'
    showAll();
    var $items = $('.gallery li img');
    $items.filter('.video').addClass('show').removeClass('hide');
    $items.not('.video').addClass('hide').removeClass('show');
});