只影响一个元素[jquery] [英] only affect one element [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.当我将鼠标悬停在一个上方时，我希望它的各个图像发生变化.

I also have multiple #rightMain divs. When I hover over one, I want it's respective image to change.

我的问题是，当我将鼠标悬停在rightMain div上时，每个rightMain div的每个图像都会更改，而不仅仅是 first rightMain div中的图像.

My problem is that when I hover over the rightMain div, every single image of every rightMain div changes, instead of only the image from the first rightMain div.

如何使它悬停在多个元素中的一个元素上，只会更改相应元素的图像，而不会改变所有元素?

How can I make it so hovering over one element out of multiple elements changes only the image of that respective element and not all of them?

    <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>

推荐答案

HTML ID是唯一的，尽管您可以在代码中编写两个ID，但这样做违反了标准……切换首先是一个类而不是一个ID ...

HTML ID's are UNIQUE although you can write two of them in code, you're breaking standards by doing so... Switch to a class instead of an ID first of all...

第二，您可以在悬停函数中的this上使用 .find() 方法，假设您要查找的图像是您要悬停的元素的孩子:

Secondly, you can use the .find() method on this in your hover function assuming that the image you're looking for is a CHILD of the element you are hovering:

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

You can use a slightly different syntax, which is $( selector, context ) - Internally jQuery basically returns $( context ).find( selector ).

已更新:OP发布了一些html

看看您的HTML，我首先建议您在.rightMain上绑定悬停"事件(将其转换为类之后):

Looking at your HTML I would first suggest that you bind the "hover" event on the .rightMain (after you turn it into a class):

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

您甚至可以在更干净的代码"行中更进一步，并执行以下操作:

You could even go a step further down the "cleaner code" line and do something like this:

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)

JavaScript (if you want to support the evil 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/

A demo (without IE6 support) is here: http://jsfiddle.net/gnarf/u7gVA/

我通常会忽略对IE6的支持，而继续编写代码，不需要JavaScript处理...

I would generally ignore the IE6 support, and just move on with the code, no need for JavaScript to handle this...

这篇关于只影响一个元素[jquery]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！