2016-05-25 35 views
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> 

答えて

0

あなたは、単に共有クラス.buttonにクリック機能を割り当ててもdata属性にメッセージを割り当てることができます。 DEMO

​​
関連する問題