仅影响一个元素[jquery的]

我有这样的一组代码：仅影响一个元素[jquery的]

$('.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格，每格rightMain变化的每一个形象，而不是从第一rightMain DIV只有图像。

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

<div id="answers"> 
     <div id="leftInfo"> 
     <img src="../Images/junglrLarge.png"/><a href="">TESTUSER</a><br /><span>Level 6</span> 
     </div> 
     <div id="rightMain"> 
       <img class="graySidewaysNub" src="../Images/graySidewaysNub.png"></img> 
       <p class="rightMainP">This is my answer!</p> 
       <div class="rate"><img src="../Images/incLike.png"/>0 &nbsp;&nbsp;<img src="../Images/alert.png"/></div> 
     </div> 

     <div id="leftInfo"> 
     <img src="../Images/junglrLarge.png"/><a href="">TESTUSER</a><br /><span>Level 6</span> 
     </div> 
     <div id="rightMain"> 
       <img class="graySidewaysNub" src="../Images/graySidewaysNub.png"></img> 
       <p class="rightMainP">Wow, I think this above answer is stupid...</p> 
     </div> 
    </div> 
</div> 



<script> 

$('.answerSpace').bind('focus', function(){ $('.opacProf').removeClass("opacProf").addClass('normProf'); 

$('.answerSubmit').stop().animate({ 

    opacity: "1" 

    }, 500); 
$('.answerSpace').css({'background-color' : '#ffffff', 'color' : '#333'}); }); 


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


</script>

来源

2011-04-17 hubrid

你能告诉我们你的HTML吗？ – 2011-04-17 07:48:42

HTML ID是UNIQUE虽然你可以写在代码中他们两个，你这样做打破标准......切换到一类，而不是一个ID首先是...

其次，你可以使用this的.find()方法在你的悬停功能，假定你正在寻找的形象是你徘徊在元素的子元素：

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

您可以使用一个稍微不同的SY ntax，这是$(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的支持）是在这里：http://jsfiddle.net/gnarf/u7gVA/

我想一般忽略IE6的支持，并继续与代码，无需JavaScript来处理这...

来源

2011-04-17 07:47:48 gnarf

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

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

$(this).stuff而不是$(#id).stuff。 this将是您徘徊在的元素。

来源

2011-04-17 07:48:10 tjameson

您的回答在每个OP问题上都不正确。 $（this）.stuff只有在将图像悬停时才起作用，而不是div容器。但你的建议是健全的。 – Dawson 2011-04-17 08:56:25

是的。无论如何，有更好的答案，所以我会保持原样。 – tjameson 2011-04-17 08:59:11

这里是你可以做什么：

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

来源

2011-04-17 08:24:51

http://jsfiddle.net/YQgTj/

您可以通过使用留一个选择的范围之内“选择，这”。

$('.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的第一个出现位置。

来源

2011-04-17 08:40:13 Dawson

仅影响一个元素[jquery的]

回答

相关问题