jQueryコードを繰り返さないようにする

Question

以下に示すようなコードがある場合、コードを何度も何度も繰り返す必要性を避ける方法はありますか？

$("#ClearSign1").click(function() { 
    signaturePad1.clear(); 
}); 
$("#ClearSign2").click(function() { 
    signaturePad2.clear(); 
}); 
$("#ClearSign3").click(function() { 
    signaturePad3.clear(); 
}); 
$("#ClearSign4").click(function() { 
    signaturePad4.clear(); 
}); 
$("#ClearSign5").click(function() { 
    signaturePad5.clear(); 
}); 

私はこれを行うことができます：

for(var i = 1; i < 6; i++) { 
    $("#ClearSign" + i).click(function() { 
     signaturePad1.clear(); 
    }); 
} 

をしかし、どのように、私はsignaturePad1変数を扱うのですか？私はそれが1をループとして2、3、4、5にアップデートする必要があります。

Answer 1

しかし、どのように私はsignaturePad1変数を扱うのですか？私はそれが1をループとして2、3、4、5にアップデートする必要があります。

さて、あなたのコードの多くを変更せずにこれをクリーンアップするための最も明白な方法は、その​​を使用して、にスコープしたオブジェクトにsignaturePad#メソッドを呼び出すことです。

ES5ソリューション：あなたはその生命維持のclosure内の各コールバックのために適切にiの値を維持するであろう、IIFEに呼び出しをラップする必要があります最も外側のスコープでは、それは、windowオブジェクトです。

for(var i = 1; i < 6; i++) { 
    $("#ClearSign" + i).click(function() { 
    (function(idx) { 
    // in here idx is always the proper i value 
    window['signaturePad' + idx].clear(); 
    })(i); 
    }); 
} 

またはあなたのclearSign関数の配列を作成し、適切な範囲を維持するであろうforEachを、使用することができます。 Pranav C Balanがあったとしても、クリックコールバックの配列を作成します。

ES6溶液：（代わりvarのletを使用）：

for(let i = 1; i < 6; i++) { 
    $("#ClearSign" + i).click(function() { 
    window['signaturePad' + i].clear(); 
    }); 
} 

letの使用iブロックがループブロック内スコープなります。これは、適切にコールバックの値をキャプチャし、グローバルスコープを汚染から私たちを保持します。言うまでもなく、コードをより読みやすく簡潔に保ちます。入れ子にされたIIFEの内部ループは、コードの明瞭さに実際に追加されず、混乱を招く可能性があります。

Answer 2

attribute starts with selectorを使用すると、forループを回避できます。その後、クリックイベントのインデックスに基づいて、参照を取得するには、アレイ内の変数の参照を格納します。

// store the variable refernce in an array 
var sign = [signaturePad1, signaturePad2, signaturePad3, signaturePad4, signaturePad5]; 
// assign click envent to elements and also cache the elements to get index 
var $ele = $('[id^="ClearSign"]').click(function() { 
    // get element by index and apply clear 
    sign[$ele.index(this)].clear(); 
}); 

---

やケース内の変数は、あなたはウィンドウオブジェクトからそれを得ることができるグローバルな文脈です。

var $ele = $('[id^="ClearSign"]').click(function() { 
    // get element by index from window object and apply clear 
    window['signaturePad1' + ($ele.index(this) + 1)].clear(); 
}); 

Answer 3

すべてのdivに共通のクラスを与えることができます。 'clickables'。次に、そのクラスをセレクタとして使用してclickイベントをバインドします。

$(".clickables").on("click", function(e){ 
    var targetObject = $(this).attr("id").replace("ClearSign", "signaturePad"); 
    window[''+targetObject].clear(); 
});//click 

Answer 4

あなたはそれがあるとしてそれを放置しないでくださいクリックイベント

$('[id^="ClearSign"]').click(function() { 
    var id = $(this).attr("id").split("ClearSign", "")[1]; 
    signaturePad + id.clear(); 
});