jQuery 코드를 반복하지 마십시오

Question

아래와 같은 코드가 있으면 반복해서 코드를 반복하지 않아도되는 방법이 있습니까?

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

을하지만 어떻게 내가이 signaturePad1 변수를 처리하나요 :

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

나는이 작업을 수행 할 수 있습니까? 루핑을 통해 1, 2, 3, 4, 5로 업데이트해야합니다.

Answer 1

그러나 signaturePad1 변수는 어떻게 처리합니까? 루핑을 통해 1, 2, 3, 4, 5로 업데이트해야합니다.

음, 코드의 많은 부분을 변경하지 않고이 문제를 정리하는 가장 확실한 방법은이 bracket notation을 사용하여에 범위의 대상이되는 객체에 signaturePad# 메소드를 호출하는 것입니다.

ES5 솔루션 : 외부 대부분의 범위에서, 즉 window 개체입니다 당신은 제대로 그 인생의 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 용액 : (var의 사용 대신 let)

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

가 let 사용은 i은 블록 루프 블록 내 범위를 만든다. 이것은 콜백 값을 적절하게 포착하고 우리가 전역 범위를 오염시키지 않도록합니다. 말할 것도없이 코드가 더 읽기 쉽고 간결하게 유지됩니다. 중첩 된 IIFE의 내부 루프는 코드 명확성을 향상시키지 않고 혼란을 야기 할 수 있습니다.

Answer 2

for 루프를 피하는 데 도움이되는 attribute starts with selector을 사용하십시오. 그런 다음 변수 참조를 배열에 저장하여 click 이벤트의 인덱스를 기반으로 참조를 가져옵니다.

// store the variable refernce in an array 
var sign = [signaturePad1, signaturePad2, signaturePad3, signaturePad4, signaturePad5]; 
// assign click envent to elements and also cache the elements to get index 
var $ele = $('[id^="ClearSign"]').click(function() { 
    // get element by index and apply clear 
    sign[$ele.index(this)].clear(); 
}); 

---

또는 경우에

이 변수는 window 객체에서 얻을 수 있습니다 다음 글로벌 컨텍스트에 있습니다.

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

Answer 3

모든 div에 공통 클래스를 부여 할 수 있습니다. 'clickables'. 그런 다음 해당 클래스를 선택기로 사용하여 click 이벤트를 바인딩하십시오.

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

Answer 4

당신이 그대로 그냥 두지 마십시오 클릭 이벤트

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