javascript - 选择同级未按预期工作

Question

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

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

这有效，但只有当您单击图像时，这在页面加载时不起作用。

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

function updateActiveImg(product = firstProduct()){ // returns first available product (I've tested this and this works as desired)
    // attempt 1, doesn't work: it does add the class to the correct image, but when I click another it just adds the class to that image whithout removing it from its siblings
    $('#product-' + product).addClass('selected').siblings().removeClass('selected');
    // attempt 2, doesn't work: this will remove the class from all the cildren, including the one I want selected
    $('#product-' + product).addClass('selected').parent().find('.product-images').removeClass('selected');
    // attempt 3, doesn't work: thought this was the final solution, but don't see why it wouldn't work
    $('#product-' + product).addClass('selected').parent().find('.product-images').not('#product-' + product).removeClass('selected');
}

有人知道我在这里缺少什么吗？

Answer 1

您需要获取其父同级元素，然后获取该元素。为了使其最初工作，请触发第一个元素的单击事件。

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