Question

所以这就是我的代码：

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

目前它将“show”类添加到“容器”中的所有图像中，即使六个中只有两个具有类“视频”。我如何仅将类“show”添加到那些具有“video”类的图像？

Answer 1

您可以将视频类添加到您的个人选择器，以获得您想要的项目。假设视频类在img标签本身上，它将如下工作：

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

或者，效率更高：

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

Answer 2

$('.showvideo').click(function(){ 
    $('.gallery li img')
        .addClass('hide')
        .removeClass('show')
        .filter('.video')
            .addClass('show')
            .removeClass('hide');
});

<强>更新
在保持可读性的同时，这是一种更有效的方法：

 $('.showvideo').click(function(){ 
    $('.gallery li img')
        .filter(':not(.video)')
            .addClass('hide')
            .removeClass('show')
        .end()
        .filter('.video')
            .addClass('show')
            .removeClass('hide');
});

如何从具有特定类的图像中添加/删除类？

2 个答案: