jquery - 如何将 jQuery 脚本用于多个部门？

Question

我希望第一张照片淡出到下一张照片mouseenter并反转mouseleave。我想为多个 id 使用 jQuery 脚本

<script type="text/javascript">
$('#picone1').mouseenter(function(){
   $('#picone1').fadeToggle(500);
   $('#pictwo1').fadeToggle(500);
});
$('#pictwo1').mouseleave(function(){
   $('#picone1').fadeToggle(500);
   $('#pictwo1').fadeToggle(500);
});
</script>
<div id="fade">
   <img src="two.gif" width="100" height="100" id="pictwo1" style="display:none;"/>
   <img src="one.gif" width="100" height="100" id="picone1"/>
</div>
<div id="fade">
   <img src="two.gif" width="100" height="100" id="pictwo2" style="display:none;top: 300px;" />
   <img src="one.gif" width="100" height="100" id="picone2" style="top: 300px;" />
</div>

如果我使用

$('#picone1,#picone2').mouseenter(function(){

如何仅淡化div鼠标进入的区域？

有没有其他或更好的脚本来做到这一点？

Answer 1

在 jQuery 里面的任何事件回调都是this指触发事件的 DOM 元素。所以如果你这样做：

 $('#picone1, #picone2').mouseenter(function() {
     // $(this) refers to whichever div was entered, so you can do:
     $(this).fadeToggle(500);
     $(this).prev('img').fadeToggle(500); // get previous IMG in the DOM and fade
 });

我建议您是否经常这样做以提供图像类而不是 ID，因此您可以做类似$('img.before')的事情并相对参考其他 img。