0
カスタムオブジェクトの配列を反復処理し、配列内の各オブジェクトに対して、オンクリックイベントリスナーでボタンを作成し、オンクリックの結果を設定しますイベントが動的に発生します。つまり、ボタンAをクリックすると「foo」というアラートが表示され、ボタンBをクリックするとアラート「バー」が表示されます。ループ内のJQueryでイベントリスナー(クリック時)を動的に設定する
私のJSHintリンターは「ループ内で機能を作ってはいけない」と言います。
私はSOコミュニティがこの目標(バニラjsまたはJQuery)を達成するためのより良いデザインパターンを共有できることを望んでいました。
Fiddleをチェックしてください - これは私がやっていることの非常に単純化されたバージョンですが、そのポイントを示しています。
のJavascript(ES6):
class Tool {
constructor (name, mainFunction) {
this.name = name;
this.mainFunction = mainFunction;
}
getName() {
return this.name;
}
getMainFunction() {
return this.mainFunction;
}
}
var hammer = new Tool('hammer', 'bang on nails');
var saw = new Tool('saw', 'cuts heavy wood');
var toolbox = [hammer, saw];
for (let i in toolbox) {
$('.wrapper').append('<div class=\"'+toolbox[i].getName()+' button\">'+toolbox[i].getName()+'</div>');
$('.wrapper').on('click', '.'+toolbox[i].getName(), function() {
alert(toolbox[i].getMainFunction());
});
}
HTML
<div class="wrapper">
Buttons:
</div>