기본 jquery 루핑 질문 '주위'

Question

기본 질문,하지만 난 조금 내 머리를 두드리고 그래서 여기에 그것을 가지고 생각 이드.

HTML은 (편집, 고정 닫는 따옴표)

<span class='deleteimage-119'>delete</span> 
<span class='deleteimage-120'>delete</span> 
<span class='deleteimage-121'>delete</span> 
<span class='deleteimage-122'>delete</span> 
<span class='deleteimage-123'>delete</span> 

자바 스크립트/JQuery와는 클릭 기능은 각각의 범위에 부착됩니다이

iids = ['119','120','121','122','123']; 
for (i=0; i<iids.length; i++) { 
     place = iids[i]; 
     $(".deleteimage-" + place).click(function() { 
       alert(place); 
      }); 
    } 

처럼 보이지만 다음과 같습니다 경고 후 클릭하면 배열의 마지막 항목 만 표시됩니다.

Answer 1

범위 지정 문제가 있습니다. 콜백이 발생할 때까지 place에는 루프의 마지막 값이 있습니다.

클로저에 대한 새 변수를 만들어야합니다. 반복 당 하나의 변수. 각 변수는 클로저에 의해 "포착"되어 콜백에 사용됩니다. 해결책이 있다면

그것은 좋은 것 : 여전히 여기 place라는 하나 개의 변수, 그리고 그것이 루프가 실행으로 업데이트지고 유지 있도록

var iids = ['119','120','121','122','123']; // don't forget `var` please 
for (var i=0; i<iids.length; i++) { 
    var place = iids[i]; // local variable? 
    $(".deleteimage-" + place).click(function() { 
     alert(place); 
    }); 
} 

아아, 자바 스크립트가 더 블록 범위가 없습니다.

var iids = ['119','120','121','122','123']; 

function f(place) { 
    // NOW `place` is a local variable. 
    $(".deleteimage-" + place).click(function() { 
     alert(place); 
    }); 
} 

for (var i=0; i<iids.length; i++) { 
    f(iids[i]); 
} 

클로저와 바인딩 변수를 사용하여이 함수 접근법을 사용하는 깔끔한 방법이 있습니다, 다른 답변을 아주 잘하는 깔끔한 방법을 포함 :

그래서 대신 함수를 사용해야합니다. 내 대답은이 문제를 설명하는 데 집중했습니다.

Answer 2

문제는 범위와 종결에 있습니다. JS에서 범위는 @ 함수 수준이며 블록 수준이 아닙니다.

이 시도 :

var iids = ['119','120','121','122','123']; 
for (i=0; i<iids.length; i++) {   
    place = iids[i]; 
    var clickFn = function(a){ 
     return function(){ 
     alert(a); 
     } 
    }(place); 
    $(".deleteimage-" + place).click(clickFn);  
} 

Answer 3

루프가 완료된 후 place = iids[iids.length - 1]을 경고하고 그래서 클릭이 발생하기 때문이다. , 당신이 그 span에 click 이벤트를 바인딩 루프 내부

iids = ['119', '120', '121', '122', '123']; 
for (i = 0; i < iids.length; i++) { 
    place = iids[i]; 
    (function(_place) { 
     $(".deleteimage-" + _place).click(function() { 
      alert(_place); 
     }); 
    } (place)); 
} 

Answer 4

하지만 이벤트 : 당신은 함수 클로저를 만들고 매개 변수로에 place을 전달해야 당신이 찾고있는 결과를 달성하기 위해 루프가 완료된 후에 만 ​​해고됩니다. 따라서 마지막 값이 항상 표시됩니다.

Answer 5

다른 사람들이 언급했듯이 범위 문제가 있습니다. 모든 클래스가 고유 한 의미가 아니라면 place 값을 데이터 속성으로 이동하고 클래스 이름으로 deleteimage으로 남겨 두었습니다. place 값은 고유 한 값이 아닌 경우

<span class='deleteimage' data-place='119'>delete</span> 
<span class='deleteimage' data-place='120'>delete</span> 
<span class='deleteimage' data-place='121'>delete</span> 
<span class='deleteimage' data-place='122'>delete</span> 
<span class='deleteimage' data-place='123'>delete</span> 

$(".deleteimage").click(function() { 
    var place = $(this).data("place"); 
    alert(place); 
}); 

는,이 대답은 적용되지 않습니다처럼 뭔가.