DRYを同様の機能のセットに適用する

Question

DRYを適用することは私の最大の苦闘です。誰も私がそれらの4つの関数と同様に達成する単一の関数を作成するのを手助けすることができますどのように各.symbolのためにそれを呼び出す方法？

$(".symbol:nth-child(1)").click(function(){ 
    $("body").removeClass(); 
    $("body").addClass("gradient1"); 
}) 


$(".symbol:nth-child(2)").click(function(){ 
    $("body").removeClass(); 
    $("body").addClass("gradient2"); 
}) 


$(".symbol:nth-child(3)").click(function(){ 
    $("body").removeClass(); 
    $("body").addClass("gradient3"); 
}) 


$(".symbol:nth-child(4)").click(function(){ 
    $("body").removeClass(); 
    $("body").addClass("gradient4"); 
}) 

Answer 1

あなたは、インデックスを取り、クリックハンドラを割り当て機能を作成することができます

function applyNthClick(n) { 
    $(".symbol:nth-child(" + n + ")").click(function(){ 
    $("body").removeClass(); 
    $("body").addClass("gradient" + n); 
    }) 
} 

をし、このようにそれを使用する：あなたはすべてを知っていれば

applyNthClick(1); 
applyNthClick(2); 
applyNthClick(3); 
applyNthClick(4); 

あるいは、 nの場合、それらの配列を作成し、その上に関数をマップすることができます。

[1,2,3,4].forEach(applyNthClick); 

Answer 2

は全体のシンボルコレクション内の各要素のインデックスを使用することはでき

var $symbols = $(".symbol").click(function(){ 
    var symbolIndex = $symbols.index(this); 
    $("body").removeClass().addClass("gradient" + (symbolIndex +1)); 
}); 

参考：それは作業の改善を求めているので、オフトピックとして、私はこの質問を閉じるために投票していますindex()