僅影響一個元素[jquery的]

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格，每格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> 

Answer 1

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來處理這...

Answer 2

首先，你不應該有多個具有相同ID的元素。 ID應該是唯一的標識符。爲此使用類。

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

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

Answer 3

這裏是你可以做什麼：

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

Answer 4

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的第一個出現位置。