3

このコードをリファクタリングして、コピーと貼り付けのコードを減らすにはどうすればよいですか?

$("#hnv_4").click(function(e){
    manipulate(4);
    e.stopPropagation();
});
$("#hnv_3").click(function(e){
    manipulate(3);
    e.stopPropagation();
});
$("#hnv_2").click(function(e){
    manipulate(2);
    e.stopPropagation();
});
$("#hnv_1").click(function(e){
    manipulate(1);
    e.stopPropagation();
});

ここでループを使用して、コードまたは jQuery を最小限に抑えることはできますか?

私は試した：

for (i = 1; i <= 4; i++) {
 $("#hnv_" + i).click(function (e) {
    alert(i);

});
}

しかし、最後に..アラートは常に5を示します

4

3 に答える 3

12

はい、

$("[id^='hnv_']").click(function(e) {
    var number = Number(this.id.split("_")[1]);
    manipulate(number);
    e.stopPropagation();
});
于 2013-07-19T16:55:37.483 に答える
0

私はこれをテストしていませんが、これはあなたがやりたいことをほぼ実行するはずです。

for(var x=1; x<5; x++) { 
  $("#hnv_"+x).click(function(e){
    manipulate( e.target.id.substr(e.target.id.search('_')+1) );    
    e.stopPropagation();
  }) 
}

次の場合、HTML id 属性から「id」番号をスクラブするという貧弱な解決策を実行しています。

e.target.id.substr(e.target.id.search('_')+1)

ただし、jQuery を使用している場合は、ID を格納できる ".data" メソッドがあれば、スクラブ ハックを行う必要はありません。例えば

for(var x=1; x<5; x++) { 
  $("#hnv_"+x).data("id",x).click(function(e){
    manipulate( $(e.target).data("id") );    
    e.stopPropagation();
  }) 
}

未検証！お気軽に訂正してください。

于 2013-07-19T17:17:32.483 に答える