Question

我是jquery的新手，还在学习。我现在的代码正常工作，它做了我想要的事情，除了它太长而且效率低下我想知道是否有办法让它更短更动态（计划将来添加更多图像）。有12个图像，每个图像都有唯一的ID。我还使用12个div来保存每个图像的标题。

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1"  height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>

有没有办法让下面的代码更短？对于其他图像，还有10个像这样的块。

$("#img1").live("mouseover", function () {
    //timeout function
    timer = window.setTimeout(function () {
        $("#cap1").show('fast')
    }, 500);

    $('#img1').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap1").hide('fast')
    })
});
$("#img2").live("mouseover", function () {
    timer = window.setTimeout(function () {
        $("#cap2").show('fast')
    }, 500);
    $('#img2').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap2").hide('fast')
    })
});

Answer 1

为图像添加一个公共类，比如class = switchable，例如

然后迭代每个并添加事件处理程序

$.each( $(".switchable"), function(i, element){
  $(element).live("mouseover",function(){
  //timeout function
    timer = window.setTimeout(function() {
      $("#cap"+i).show('fast')
    }, 500);

    $(element).mouseout(function() {
      if (timer) {
        window.clearTimeout(timer);
      }
      $("#cap"+i).hide('fast')
    })
  });
});

Answer 2

你可以这样做：

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1" rel="cap1" height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>


$("img").live("mouseover", function(){
     var $e = $(this);
     timer = window.setTimeout(function() {
       $('#' + $e.attr('rel')).show('fast')
     }, 500);
});

$("img").live("mouseout", function(){
     var $e = $(this);
     if (timer) {
          window.clearTimeout(timer);
     }
     $('#' + $e.attr('rel')).hide('fast')
});

Answer 3

考虑使用 .delegate（）而不是 .live（）。这是delegate man page

Answer 4

你可以缩小它。 http://jscompress.com/

$("#img1").live("mouseover",function(){timer=window.setTimeout(function(){$("#cap1").show("fast")},500);$("#img1").mouseout(function(){if(timer){window.clearTimeout(timer)}$("#cap1").hide("fast")})});$("#img2").live("mouseover",function(){timer=window.setTimeout(function(){$("#cap2").show("fast")},500);$("#img2").mouseout(function(){if(timer){window.clearTimeout(timer)}$("#cap2").hide("fast")})})

使代码变小总是存在缺陷，这通常会导致复杂性增加和代码可读性降低，从而使得在6个月内更难以修复支持/错误。如果您现在理解代码就可以了 - 在6个月内，当您更擅长jquery /编码时，我会再次查看它。

Jquery更短的代码

4 个答案: