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 closure inside loops – simple practical example，了解您的循环不起作用的原因，并且需要额外的功能。

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，然后不必进行擦除黑客攻击。 e.g。

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

未经测试！随时纠正我。

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

3 个答案: