JS ループはイベントを li にバインドして実装します。 li をクリックすると、そのインデックス値とコンテンツがポップアップ表示されます。

最近、面接中にいつもこのような質問に遭遇します。

ネット上には私も同意する回答がたくさんありますが、それでも繰り返したいと思います。よく言われるように、良い記憶力は悪い文章ほど良くはありません。ありふれていて、単純で、繰り返しのことですが、要するに、ただ書き続けるだけでも、記憶は非常に深くなり、忘れても取り出して見ることができます。

コードは以下の通りです: (簡単)

htmlコード

• バナナ
• リンゴ
• パイナップル
• キウイ
• マンゴー

方法1 :

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

for(var i = 0; i

itemli[i].index = i; //それぞれに 1 つ定義します。 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); // n 改行インデックス値は 0 から始まります

}

})(i)

}

または:

for(var i = 0; i }) itemli[i ].onclick = function(n){
return function(){
alert("添え字のインデックス値は: "+n+"n"+"テキストの内容は: "+itemli[n ].innerHTML); // n 改行 インデックス値は 0 から始まります
}
}(i)
}

方法 3: jQuery (より単純な)

$("ul li").click(function(){
var item = $(this).index(); //インデックスの添字の取得も 0 から始まります
var textword = $(this).text() // テキストの内容テキストの内容は次のとおりです。 ; // 改行
})