javascript - jQuery如何仅添加具有nth-child的单击图像CSS类？

如何在单击的缩略图中添加class="active"？

HTML:

<ul class="product-thumbnail">
    <li>
        <img class="thumbnail" src="Nile_1_16_0095.jpg">
    </li>
    <li>
        <img class="thumbnail" src="Nile_1_16_0096.jpg">
    </li>
    <li>
        <img class="thumbnail" src="Nile_1_16_0097.jpg">
    </li>
</ul>

JS:

$(".thumbnail").click(function () {
    var index = $(this).parent().index();
    $('ul > li:nth-child(' + index + ')').attr('class', 'active');
});

这会将所有img类更改为active。相反，我只希望单击img来获得active类。我该如何实现？

最佳答案

而不是.attr('class', 'active');，您应该使用.addClass('active');，并且不需要索引，您可以将类直接添加到父类:

$(".thumbnail").click(function () {
    //remove class 'active' from all the lis
    $(this).parent().siblings().removeClass('active');

    //Add class 'active' to the clicked one
    $(this).parent().addClass('active');
});

希望这可以帮助。

关于javascript - jQuery如何仅添加具有nth-child的单击图像CSS类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35719174/