Question

我正在尝试循环浏览图片，如果最后一张图片的类别为.active，我会重新开始。但是，它根本不起作用：

img.click(function () {
    $(this).removeClass('active').next('img').addClass('active');
    if ($('.active').is(':last-child')) {  
       img.first().addClass('active');
    }

});

Answer 1

要检查最后一张图像是否具有类.active，您必须几乎将其反转并首先获取最后一张图像，然后检查该类，并且因为最后一个图像不是图像，所以不会工作

if ( $('.module.m-slide img:last').hasClass('.active') ) { ...

Answer 2

您的代码中有2个问题：

当您点击最后一张图片时，此代码：

$(this).removeClass('active').next('img').addClass('active');

不会将active类添加到任何内容，因为.next('img')将返回一个空数组。所以下一行也行不通：

if ($('.active').is(':last-child'))

因为没有活动元素。

我相信您需要通过以下方式解决问题：

if ($(this).is(':last-child'))

接下来的事情：你的所有图片都不能是:last-child，因为即使你的最后一张图片也不是最后一个孩子！仔细查看您的HTML代码：

<div class="module m-slide">
    <img src="http://placehold.it/1200x800&text=1" alt="" />
    <img src="http://placehold.it/1200x800&text=2" alt="" />
    <img src="http://placehold.it/1200x800&text=3" alt="" />
    <div class="m-slide-ctrl"></div>
</div>

您的上一个孩子是<div class="m-slide-ctrl"></div>

我建议以下面的方式改变它：

<div class="module m-slide">
    <div class="m-slide-ctrl"></div>
    <img src="http://placehold.it/1200x800&text=1" alt="" />
    <img src="http://placehold.it/1200x800&text=2" alt="" />
    <img src="http://placehold.it/1200x800&text=3" alt="" />
</div>

Demo

简单的.is（）没有按预期工作

2 个答案: