Question

我有一组这样的代码：

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

我还有多个#rightMain div。当我将鼠标悬停在一个上面时，我希望它的各个图像能够改变。

我的问题是，当我将鼠标悬停在rightMain div上时，每个rightMain div的每张图片都会发生变化，而不只是来自 first {{1 div。

如何将其悬停在多个元素中的一个元素上只会更改相应元素的图像而不是所有元素的图像？

rightMain

Answer 1

HTML ID是 UNIQUE 虽然您可以在代码中编写其中两个，但这样做会破坏标准......首先切换到一个类而不是一个ID ...... / p>

其次，您可以在悬停函数中使用this方法，假设您要查找的图片是您正在悬停的元素的CHILD：

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

您可以使用稍微不同的语法，即$( selector, context ) - 内部jQuery基本上返回$( context ).find( selector )。

更新：OP发布了一些HTML

查看您的HTML我会首先建议您在.rightMain上绑定“悬停”事件（在您将其转换为类之后）：

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

你甚至可以在“清洁代码”行中更进一步，并做这样的事情：

CSS：

.rightMain div.nub { 
   background-image:url(/Images/whiteSidewaysNub.png);
   width: 10px; /* obviously guessing at this value here.. */
   height: 10px; /* obviously guessing at this value here.. */
}

 /* works in a lot of new browsers without ANY JS - see
    http://www.quirksmode.org/css/contents.html#t16 */
.rightMain:hover div.nub,
 /* just in case you want to support IE6 / use a class! */
.rightMain.hovered div.nub {
   background-image: url(/Images/graySidewaysNub.png);
}

JavaScript（如果你想支持邪恶的IE6）

$(".rightMain").hover(function() { $(this).toggleClass('hovered'); });

HTML：

<div class="rightMain">
   <!-- instead of the image -->
   <div class='nub'> </div>
   <!-- the rest of your stuff -->
</div>

演示（没有IE6支持）在这里：.find()

我一般会忽略IE6的支持，继续使用代码，不需要JavaScript来处理这个......

Answer 2

首先，您不应该有多个具有相同ID的元素。 ID应该是唯一标识符。使用类。

您可以做的另一件事是使用this关键字。做：

$(this).stuff代替$(#id).stuff。 this将是您悬停的元素。

Answer 3

http://jsfiddle.net/YQgTj/

您可以使用“selector，this”保持在选择器的范围内。

$('.rightMain').hover(function() {
    $('.graySidewaysNub', this).attr('src','http://jsfiddle.net/img/keys.png')
}, function() {
    $('.graySidewaysNub', this).attr('src','http://jsfiddle.net/img/logo.png')
});

绝对使用class而非id。我将id与“个人”这个词联系在一起 - 永远只有一个。一个头，脚，身体。

我没有看到需要使用：first-child，因为你在想要改变的图像上使用了一类'graySidewaysNub'。

如果你想使用更抽象的方法，你也可以使用：$('img:first-child', this).attr('src','http://jsfiddle.net/img/keys.png')，这将抓住'rightMain'中第一次出现img。

Answer 4

以下是您可以做的事情：

jQuery(".rightMainP").hover(function(){
  jQuery(this).parent().find("img:first").attr({"src","../Images/whiteSidewaysNub.png"});
},function(){
  jQuery(this).parent().find("img:first").attr({"src","../Images/graySidewaysNub.png"});
});

只影响一个元素[jquery]

4 个答案: