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

你可以这样做（没有测试但它应该有用）

$("#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 2

怎么样：

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

Code example on jsfiddle.

另一种选择是使用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');
        }
    });
});

<强> Example of delegate()

Answer 3

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

更有效的jQuery悬停到多个div的fadeIn / fadeOut？

3 个答案: