Question

如果我的代码如下所示，是否有任何方法可以避免一遍又一遍地重复代码？

 $("#ClearSign1").click(function () {
    signaturePad1.clear();
 });
 $("#ClearSign2").click(function () {
    signaturePad2.clear();
 });
 $("#ClearSign3").click(function () {
    signaturePad3.clear();
 });
 $("#ClearSign4").click(function () {
    signaturePad4.clear();
 });
 $("#ClearSign5").click(function () {
    signaturePad5.clear();
 });

我可以这样做：

 for(var i = 1; i < 6; i++) {
    $("#ClearSign" + i).click(function () {
       signaturePad1.clear();
    });
 }

但是如何处理signaturePad1变量呢？我需要它将1更新为2,3,4,5作为循环。

Answer 1

但是如何处理signaturePad1变量呢？我需要它将1更新为2,3,4,5作为循环。

嗯，在不改变代码的情况下清理它的最明显的方法是使用bracket notation在其作用域的对象上调用signaturePad#方法。在最外层的范围内，即window对象：

ES5解决方案：您必须将调用包装在IIFE中，这将为closure内的每个回调正确维护i的值IIFE。

for(var i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
   (function(idx) {
     // in here idx is always the proper i value
     window['signaturePad' + idx].clear();
   })(i); 
  });
}

或者您可以创建clearSign函数的数组并使用forEach，这将保持适当的范围。或者创建一系列点击回调，如Pranav C Balan所示。

ES6解决方案（使用let代替var）：

for(let i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
     window['signaturePad' + i].clear();
  });
}

使用let在循环块中使i 阻止作用域。这样可以正确捕获回调的值，并防止我们污染全局范围。更不用说，它使代码更具可读性和简洁性 - 嵌套的IIFE内部for循环并没有真正增加代码清晰度并且可能导致混淆。

Answer 2

使用attribute starts with selector有助于避免for循环。然后将变量引用存储在数组中，以根据click事件的索引获取引用。

var $ele = $('[id^="ClearSign"]').click(function() {
  // get element by index from window object and apply clear
  window['signaturePad1' + ($ele.index(this) + 1)].clear();
});

或者如果变量在全局上下文中，那么你可以从window对象中获取它。

$(".clickables").on("click", function(e){
  var targetObject = $(this).attr("id").replace("ClearSign", "signaturePad");
  window[''+targetObject].clear();
});//click

Answer 3

你可以给所有div一个共同的类，例如＆＃39; clickables＆＃39; 。然后使用该类作为选择器绑定click事件。

val df = sqlContext.jsonFile("s3://testData/2016/06/*/*/*") 
df.show()

Answer 4

没有看到您在点击事件中调用多个方法

$('[id^="ClearSign"]').click(function () {
   var id = $(this).attr("id").split("ClearSign", "")[1];
   signaturePad + id.clear();
});

避免重复jQuery代码

4 个答案: