Question

我有一个列表，每个列表元素都有一个textarea和一个img。当我将鼠标悬停在列表的textareas之一上时，我希望相应的img更改src。

问题在于，当我将鼠标悬停在其中一个列表上的textarea上时，列表中的所有img都会更改，而不仅仅是该列表项上的那个。

$('.rightMainP').hover(function() {
    $('#rightMain').find('img:first-child').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $('#rightMain').find('img:first-child').attr('src', '../Images/graySidewaysNub.png');
});

在我的代码中，每个列表项中都有多个img，而我的jquery不能指定只更改列表项中具有正在悬停的textarea的那个。

Answer 1

您需要选择与您悬停在<img>相同的列表元素中的<textarea>。这应该这样做：

$('.rightMainP').hover(function() {
    $(this).closest('li').find('img').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $(this).closest('li').find('img').attr('src', '../Images/graySidewaysNub.png');
});

每当触发悬停事件时，都会对所有图像执行属性更改，这些图像是悬停的textarea是其后代的相同列表元素的后代。这应该只是一张图片。

如果textareas和图像实际上是同一元素的子元素（即它们是兄弟姐妹），那么你也可以使用

$('.rightMainP').hover(function() {
    $(this).siblings('img').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $(this).siblings('img').attr('src', '../Images/graySidewaysNub.png');
});

Answer 2

如Jon所说，我建议：

$(this).siblings('img').attr('src', '../Images/blablabla');

此外，如果您不想更改同一li中的其他图片，请添加.first（）以进行更改：

$(this).siblings('img').first().attr('src', '../Images/blablabla');

jquery子元素问题

2 个答案: