リファクタリング基本的なJavaScriptの

Question

I次のコードを持っている：

<script type="text/javascript"> 
$(function() { 
    //div1 toggle 
    function runEffect(){ 
     var options = {}; 
     //run the effect 
     $("#div1_toggle").toggle("blind",options,350); 
    }; 
    $("#div1").click(function() { 
     runEffect(); 
     return false; 
    }); 
}); 
</script> 

等文字通りDIV1、DIV2、DIV3という名前のdivの数に対して複製、上記のコード、これは恐ろしく悪いです

を想像し、そしてI のdivに適用されるようにコードを書き換えて、という名前を付けて、div（等名+ _toggle）のトグルを切り替えます。

ボーナス：冗長性を減らしながら、これらのdivのいくつかに異なるトグル速度（すなわち、上記の350ms）を組み込むことができますか？

Answer 1

多くの場合、JavaScriptを簡略化するのは、まずHTMLを単純化することです。

あなたがDivsのIDを使用しないでください（あなたはあなた自身のID番号を増やす必要はありませんか？）代わりにクラスを使用します（クラスは一般的で繰り返し可能です） 。これは、 "toggle div"が何らかの形で "クリックされたdiv"に関連している場合、たとえば、1つが他のものに続いている場合などに最適です。異なる速度でトグルいくつかのdiv要素については

$(function() { 
    $(".clickable").click(function() { 
     $(this).next(".togglable").toggle("blind", {}, 350); 
    }); 
}); 

：

<div class="clickable"> 
</div> 
<div class="togglable"> 
</div> 
... rinse and repeat, as many times as you want... 

次に、あなたのスクリプトは単純です：私はこのようにそれを行うだろうか？確かに、ちょうど別のクラスを追加します。これを行うには、他の方法があります

$(function() { 
    $(".clickable").click(function() { 
     // A "normal" div 
     $(this).next(".togglable:not(.fast)").toggle("blind", {}, 350); 
     // A "fast" div 
     $(this).next(".togglable.fast").toggle("blind", {}, 100); // New value 
    }); 
}); 

：

<div class="clickable"> 
</div> 
<div class="fast togglable"> 
</div> 

は今すぐにスクリプトを変更します。代わりに、 "クリック可能な" divに "高速"クラスを張ることができます。次に、2つの異なるクリックハンドラがあります。あなたは "普通の"クラスと "速い"クラスを持つことができるので、:not(.fast)を行う必要はなく、代わりに.normalを行うことができます。これはあなたにいくつかのアイデアを与える願っています...

Answer 2

あなたは

$に（ '＃DIV1、＃DIV2、＃DIV3、.someClass'）、その後

と内部チェックをセレクタのカンマ区切りのリストを渡すことができますどのようなハンドラこれはを参照し、それに基づいて何かを行う。

それは素晴らしいアイデアではないですが、あなたも...すべてのdiv

$（ 'DIV'）を選択することができます。