jquery更短的代碼

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

你可以這樣做：

<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 2

添加一個公共類的形象，比方說

類=切換然後，只需遍歷每個並添加事件處理程序

$.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 3

你可以只運行如下它。 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 /編碼時，我會再看一遍。

Answer 4

考慮使用.delegate（）的代替.live（）。這裏是delegate man page