Jquery短代码

我是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>

---

向映像中添加一个公共类，例如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')
    })
  });
});

---

你可以缩小它

使代码更小总是有一个缺点，这通常会导致复杂性增加和代码可读性降低，从而使支持/错误修复在6个月内变得更加困难。如果您现在理解了代码，就可以了-在6个月后，当您在jquery/编码方面表现更好时，我会再看一遍。

您可以这样做：

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

考虑使用.delegate而不是.live。这是你的电话号码

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

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