javascript - 如何减少复制粘贴代码？重构？

Question

如何重构这段代码，使其包含更少的复制粘贴代码？

$("#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

Answer 1

是的，

$("[id^='hnv_']").click(function(e) {
    var number = Number(this.id.split("_")[1]);
    manipulate(number);
    e.stopPropagation();
});

Answer 2

将您的 HTML 更改为：

<div class="hnv" data-hnv="1">...</div>
<div class="hnv" data-hnv="2">...</div>
and so on

然后将jQuery更改为：

$(".hnv").click(function(e) {
    manipulate($(this).data("hnv"));
    e.stopPropagation();
}

如果你想用一个for循环来做，你必须在闭包中捕获索引，使用一个立即执行的函数：

for (var i = 1; i <= 4; i++)
{
    (function (i) {
        $("#hnv_" + i).click(function(e){
            manipulate(i);
            e.stopPropagation();
        })
    })(i);
}

请参阅循环内的 JavaScript 闭包——简单实用的示例，以解释为什么您的循环不起作用，并且需要额外的函数。

Answer 3

我没有对此进行测试，但这应该大致可以满足您的需求。

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，您可能有“.data”方法，您可以在其中存储 id，然后不必进行那种擦洗黑客。例如

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

未测试！随时纠正我。