Question

请帮我解决以下问题：

<!-- this is the visible code -->
<div id="divid">{some default content}<img class="img" src="GoNextArrow.jpg" alt=""></div>

<!-- this is a hidden list of contents -->
<div style="display: none;">
    <div id="divid1">{some content 1}<img class="img" src="GoNextArrow.jpg" alt=""></div>
    <div id="divid2">{some content 2}<img class="img" src="GoNextArrow.jpg" alt=""></div>
    <div id="divid3">{some content 3}<img class="img" src="GoNextArrow.jpg" alt=""></div>
    <div id="divid4">{some content 4}<img class="img" src="GoNextArrow.jpg" alt=""></div>
    <div id="divid5">{some content 5}<img class="img" src="GoNextArrow.jpg" alt=""></div>
</div>

<!-- this is an jquery script which replace the #divid with any of divid1-divid5 -->
$('#divid').hide().html(elem.html()).fadeIn();  
<!-- elem is a variable, divid1 to divid5, e.g. var elem = $j('#divid'+id);  -->

<!-- I need a rollover effect, I made it so: -->
$('img.img').hover(function () {
    $(this).attr('src', 'GoNextArrowHover.jpg');
}, function () {
    $(this).attr('src', 'GoNextArrow.jpg');
});

这适用于第一个div divid，但是当divid1-divid5加载而不是divid时不适用。我的错在哪里？

谢谢！

Answer 1

使用delegate()^(docs)管理divid容器内的事件。

$('#divid').delegate('img.img','mouseenter',function () {
    $(this).attr('src', 'GoNextArrowHover.jpg');
})
  .delegate('img.img','mouseleave', function () {
    $(this).attr('src', 'GoNextArrow.jpg');
});

或者，如果可能，请改为<img> <a>元素，然后使用background-image属性使用CSS执行此操作：

#divid > div > a {
    background-image:url(GoNextArrow.jpg);
    background-repeate:no-repeat;
}
#divid > div > a:hover {
    background-image:url(GoNextArrowHover.jpg);
}

您需要更多属性才能使其正确

Answer 2

不是每次重新绑定.hover()，而是使用.live()，它将适用于与您的选择器匹配的所有当前和未来元素，例如......

$('.hoverme').live('hover', function(event) {
    if (event.type == 'mouseenter') {
        $(this).attr('src', 'GoNextArrowHover.jpg');
    }
    else {
        $(this).attr('src', 'GoNextArrow.jpg');
    } 
});

Answer 3

当您使用.html()替换元素的内容时，您正在创建新的子元素（在您的情况下为img），因此您需要将hover处理程序重新绑定到每次调用img后都会生成新的.html()元素。

Answer 4

使用jQuery live来绑定悬停尝试。实时男士，该功能也适用于与选择器匹配的所有未来元素。

http://api.jquery.com/live/

$（selector）.live（'hover'，function（）{}）;

Answer 5

您可以考虑使用replaceWith()：

$('#divid').hide().replaceWith( elem.fadeIn() );

如果您已将功能绑定到elem上的事件，则即使您已将elem换成页面上的其他元素，这些功能仍应保留。

示例：http://jsfiddle.net/redler/eLD9A/

替换html时，jquery选择器不起作用！

5 个答案: