Jquery短いコード

Question

私はjqueryをまだ学んでいません。私が今働いているコードは、それが長すぎて非効率的であることを除いて私が望むことをします。私はそれをより短く、よりダイナミックにする方法があるかどうか疑問に思っていました。一意のIDを持つそれぞれ12の画像があります。私はまた、各画像のキャプションを保持する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/codingでうまくいけば、もう一度見ていきます。あなたがこれを行うことができます

Answer 4

ではなく.live（）の.delegate（）を使用することを検討してください。ここにはdelegate man page