在 img 上使用 .closest 淡出图像

Question

我正在尝试使用 .closest 到 fadeOut 图像。要淡化的图像有 .icon 的 class，页面上有多个 .icons，所以我想使用 this 和 .closest 来定位 .icon 在与单击的元素相同的 div 中。

我的 JS Fiddle 展示了功能。单击较小的方块，文本淡入。https://jsfiddle.net/x9sxcLr9/

然而，icon/large 方块也应随着文本淡入而淡出。这是该功能的代码：

$(this).closest("img.icon").fadeOut( "fast", function() {});

HTML 设置使用 .cross 作为事件处理程序，因此它应该在附近找到正确的 .icon（在同一个 div 中），但它没有好像没找到...

<div class="">
            <img class="icon" src="http://placehold.it/100x100" />
            <img class="cross" src="http://placehold.it/35x35" />
            ...
</div>

$( ".cross" ).click(function() { ... }

我哪里出错了？

Answer 1

您应该使用 siblings 而不是 closest。 Closest 将寻找具有给定 class 的祖先。由于该元素是被单击元素的同级元素，因此使用 siblings.

$(".cross").click(function() {
    var status = $(this).parent().attr("class")

    if (status == 'active') {
        $(this).parent(this).removeClass("active");
    } else {
        $(this).parent(this).addClass("active");
        $(this).siblings("img.icon").fadeOut("fast", function() {});
    }
});

演示：https://jsfiddle.net/tusharj/x9sxcLr9/1/

Answer 2

您正在查找 .prev()，它将匹配被点击之前的元素：

$(this).prev("img.icon").fadeOut( "fast", function() {});

Your fiddle, updated.

在 img 上使用 .closest 淡出图像

Using .closest on an img to fade out the image

jquery

closest