更高效的 jQuery 悬停到淡入/淡出多个 div？

Question

我已经掌握了将鼠标悬停在图像上并在图像下方显示文本 div 的基础知识。但如何才能提高效率呢？

就目前情况而言，我必须有四个不同的函数来淡入/淡出每个图像的相应文本。

我需要保留图像的 dl 和 dt 标记，但保存文本的 div 的标记可以更改。

jQuery

$(document).ready(function()
{    
    $("dt.imgone").hover(
      function () {
        $("div.textone").fadeIn('fast');
      }, 
      function () {
        $("div.textone").fadeOut('fast');
      }
    );
});

html

<div id="imagegallerydiv">

   <dl class="gallery"><dt class="imgone"><img alt="img" src="one.jpg"></dt>
   <dt>Image Title One</dt></dl>

   <dl class="gallery"><dt class="imgtwo"><img alt="img" src="two.jpg"></dt>
   <dt>Image Title Two</dt></dl>

   <dl class="gallery"><dt class="imgthree"><img alt="img" src="three.jpg"></dt>
   <dt>Image Title Three</dt></dl>

   <dl class="gallery"><dt class="imgfour"><img alt="img" src="four.jpg"></dt>
   <dt>Image Title Four</dt></dl>

</div>

<div id="wide-text-div-under-all-images">

     <div class="textone">Lorem Ipsum One</div>

     <div class="texttwo">Lorem Ipsum Two</div>

     <div class="textthree">Lorem Ipsum Three</div>

     <div class="textfour">Lorem Ipsum Four</div>

</div>

CSS

#imagegallerydiv {width: 700px; height:200px; margin:5px; text-align: center;}

dl.gallery {width: 97px; text-align: center; float: left;}

.gallery dt {width: 80px; margin-top:2px; font-size: .7em; text-align:center;}

#wide-text-div-under-all-images div {display: none;}

Answer 1

var $divs = $("#wide-text-div-under-all-images div");
$("#imagegallerydiv dl").each(function(index) {
    $("img", this).hover(function() {
        $divs.eq(index).fadeIn("fast");
    },
    function() {
        $divs.eq(index).fadeOut("fast");
    });
});

Answer 2

你可以这样做（没有测试过，但它应该可以工作）

$("#imagegallerydiv dt").hover(
      function () {
          var idx = $(this).parent().index();
          $("#wide-text-div-under-all-images div").eq(idx).fadeIn('fast');
      }, 
      function () {
          var idx = $(this).parent().index();
          $("#wide-text-div-under-all-images div").eq(idx).fadeOut('fast');
      }
    );

编辑 idx = 部分

Answer 3

怎么样：

$(document).ready(function(){    
    $("#imagegallerydiv dt[class]").hover(
      function () {
        var index = $(this).parent().index();
        $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast');
      }, 
      function () {
        var index = $(this).parent().index();
        $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast');
      }
    );
});

jsfiddle 上的代码示例。

另一种选择是使用 < code>delegate() 因此您不会直接将一堆事件处理程序绑定到 dt。

$(document).ready(function() {
    $("#imagegallerydiv").delegate("dt[class]", "hover", function(e) {
        if (e.type === "mouseenter") {
            var index = $(this).parent().index();
            $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast');
        }
        if (e.type === "mouseleave") {
            var index = $(this).parent().index();
            $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast');
        }
    });
});

delegate() 示例