javascript - 添加到脚本时 $(this).closest 不起作用

Question

你好，我有一个非常基本的脚本来移动 child <img>在其<label>内当您将鼠标悬停在 <label> 上或关闭时，父级元素。

问题在于您将鼠标悬停在一个标签上。所有标签下的所有图像都会移动..这是我不想要的。我试图通过添加 $(this).closest 来解决这个问题到我的功能。但是当 $(this).closest添加代码后会损坏。如果您从我的代码中删除 (this).closest，它可以正常工作，但它会影响所有这些代码，而不是悬停在其上的单个代码。

HTML

<div class="checkbox-cover images-true">
<div>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
</div>
</div>

jQuery

$(".checkbox-cover.images-true>div>label").hover(
    function () {
        $(this).closest('img').stop().animate({top: '-200px'});
    }, function (){
        $(this).closest('img').stop().animate({top: '0'});        
});

Answer 1

closest搜索 DOM 树向上(祖先)，而不是向下(后代)，你真正想要的是 find相反。

$(".checkbox-cover.images-true > div > label").hover(
    function () {
        $(this).find('> img').stop().animate({top: '-200px'});
    }, function () {
        $(this).find('> img').stop().animate({top: '0'})
    });        
});

最后，正如评论所建议的，您可以使用 $('img', this) 缩短 $(this).find('> img') ，设置“上下文”参数。