저의 영어가 제목에이 상황을 명확하게 설명하기에 충분하지 않기 때문에 너무 구체적인 제목이 아니 어서 죄송합니다.
다음과 같은 코드가 있습니다.
var e = document.getElementsByClassName( "test" );
var myFunc = function( e ) {
e = e + 1;
};
for ( var i = 0, l = e.length; i < l; i++ ) {
var t = e[ i ];
var j = 0;
(function( n, num ){
num = 0;
n.addEventListener("click", function() {
myFunc( num );
console.log( num )
});
}( t, j ));
}
내 의도는 변수 j의 값을 증가시키는 것이지만 클릭 할 j=0때마다 여전히 얻는 결과 .test입니다.
문제는 JavaScript가 참조로 원시 값 (예 : 숫자)을 전달하지 않고 값으로 전달한다는 것입니다. myFunc기능이 있어야 변경할 인수에 "외부"값을 할당 할 수 없습니다, 뭔가를 반환합니다.
다음 브라우저가 지원하는 것이 합리적인 가정을 기반으로 더 현대적인 접근의 getElementsByClassName()도 지원 Array.prototype.forEach().
다음은 numHTML 요소 당 하나의 클로저를 생성 합니다.
var elems = document.getElementsByClassName("test"),
myFunc = function(e) {
return e += 1;
};
[].slice.call(elems).forEach(function (elem) {
var num = 0;
elem.addEventListener("click", function () {
num = myFunc(num);
this.textContent = this.textContent.replace(/\d*$/, num);
});
});<button class="test">Test 0</button>
<button class="test">Test 0</button>
<button class="test">Test 0</button>Javascript 는 참조로 객체를 전달하므로 약간 변경하면 작동합니다.
var elems = document.getElementsByClassName("test"),
myFunc = function(properties) {
properties.num += 1;
};
[].slice.call(elems).forEach(function (elem) {
var properties = {
num: 0
};
elem.addEventListener("click", function () {
myFunc(properties);
this.textContent = this.textContent.replace(/\d*$/, properties.num);
});
});<button class="test">Test 0</button>
<button class="test">Test 0</button>
<button class="test">Test 0</button>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다