JS 루프는 이벤트를 li에 바인딩합니다. li를 클릭하면 해당 인덱스 값과 콘텐츠가 표시됩니다.

최근 인터뷰를 하다 보면 이런 질문을 자주 접하게 됩니다.

온라인에는 제가 동의하는 답변이 많이 있지만, 그래도 반복하고 싶은 말은: 좋은 기억은 아니다. 나쁜 글만큼이나 좋습니다. 평범하지만 단순하고 반복되는 글입니다. 간단히 말해서, 단순한 글은 잊어버리더라도 여전히 꺼내서 살펴볼 수 있습니다.

코드는 다음과 같습니다. (더 간단하게)

html 코드

🎜>Apple

 

• Pineapple

 

• 키위

 

• 망고
• 방법 1:

• var itemli = document.getElementsByTagName("li");
for(var i = 0; i

　itemli[i].index = i; 각 li에 대한 속성 인덱스 값을 지정하고

　itemli[i].onclick = function(){

Alert("아래 첨자 인덱스 값은: "+this.index+"n"+ "텍스트 내용은 다음과 같습니다. "+this.innerHTML); // n 개행 인덱스 값은 0부터 시작합니다

　}

}

방법 2: (일반적으로 사용됨)

var itemli = document.getElementsByTagName("li");

for(var i = 0; i

　(function(n) {

 itemli[i].onclick = function(){

　alert("하위 첨자 인덱스 값: "+n+"n"+"텍스트 내용: "+itemli[ n].innerHTML); // nline break 인덱스 값은 0부터 시작합니다

　　}

　})( i)

}

for(var i = 0; i

itemli[i].onclick = function(n){

return function(){

Alert("아래 첨자 인덱스 값: " +n+"n"+"텍스트 내용은 "+itemli[n].innerHTML); // n 개행 색인 값은 0부터 시작합니다

                                                                                           var item = $(this).index(); 인덱스 아래 첨자는 0부터 시작합니다.

var textword = $(this).text(); //텍스트 내용

Alert("아래 첨자 인덱스 값은: " + item +"n"+ "텍스트 내용은 다음과 같습니다. : "+textword); // nline break

})