Question

我遇到了一个有些愚蠢的问题。看一下下面的html：

R-devel

我想要做的是，无论何时加载页面，它都会将第一个产品的图像类设置为“选择”＆＃39;或者，当您点击产品图片时，它会将该图片的类别更改为“已选择”＃39;并从其他类中删除相同的类。

我已使用以下

对此进行了测试

<div id="product-container">
    <div id="product-1" class="product">
         <img id="product-img-1" class="product-images">
    </div>

    <div id="product-2" class="product">
         <img id="product-img-2" class="product-images selected">
    </div>

    <div id="product-3" class="product">
         <img id="product-img-3" class="product-images">
    </div>
</div>

这样做有效，但只有当您点击图片时，这在页面加载时才起作用。

为了解决这个问题，我写了以下内容：

$("img.product-images").on('click', function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

有谁知道我在这里失踪了什么？

Answer 1

您需要获取其父级兄弟，然后获取该元素。要使其最初工作，请触发第一个元素的click事件。

$("img.product-images").on('click', function(){
    $(this).addClass('selected').parent().siblings().find('.product-images').removeClass('selected');
}).eq(0).click();

选择兄弟节点不按预期工作

1 个答案: