この記事では、ループバッチを使用してJavaScriptに登録されているイベントがインデックス値を正しく取得できないという事実の解決策について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
多くの友人が問題に遭遇する可能性があります。つまり、forループを使用してイベント処理機能をバッチ登録し、最後にイベント処理関数を介して現在の要素のインデックス値を取得すると、失敗します。最初にコードの例を見てみましょう：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
幅：240px;
オーバーフロー：隠し;
テキストオーバーフロー：省略記号;
ホワイトスペース：nowrap;
フォントサイズ：12px;
高さ：30px;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var olis = document.getElementsByTagname（ "li"）;
var show = document.getElementById（ "show"）;
for（var index = 0; index <olis.length; index ++）{
olis [index] .onclick = function（）{
show.innerhtml = index;
}
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li>一生懸命働くことによってのみ、明日はより良いことができます。 </li>
<li>共有と相互支援は、進歩の最大の原動力です。 </li>
<li>毎日が新しいです、それを大切にしてください。 </li>
<li>誰も最初からマスターではありません。一生懸命働くことによってのみ成長できます</li>
<li>現在の時間だけが貴重で、次の秒は幻想です</li>
</ul>
</body>
</html>
上記のコードでは、LI要素をクリックすると、ポップアップ値は常に4です。当初のアイデアは、LI要素をクリックして、Divの現在のLi要素のインデックス値を表示することです。以下の理由を簡単に分析しましょう。その理由は非常に簡単です。 forループが実行された後、インデックス値が4に変更されたため、上記の現象が発生します。
コードは次のように変更されます。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
幅：240px;
オーバーフロー：隠し;
テキストオーバーフロー：省略記号;
ホワイトスペース：nowrap;
フォントサイズ：12px;
高さ：30px;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var olis = document.getElementsByTagname（ "li"）;
var show = document.getElementById（ "show"）;
for（var index = 0; index <olis.length; index ++）{
olis [index] ._ index = index;
olis [index] .onclick = function（）{
show.innerhtml = this._index;
}
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li>一生懸命働くことによってのみ、明日はより良いことができます。 </li>
<li>共有と相互支援は、進歩の最大の原動力です。 </li>
<li>毎日が新しいです、それを大切にしてください。 </li>
<li>誰も最初からマスターではありません。一生懸命働くことによってのみ成長できます</li>
<li>現在の時間だけが貴重で、次の秒は幻想です</li>
</ul>
</body>
</html>
上記のコードは当社の要件を実装しており、もちろん閉鎖を使用することもできます。コードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
幅：240px;
オーバーフロー：隠し;
テキストオーバーフロー：省略記号;
ホワイトスペース：nowrap;
フォントサイズ：12px;
高さ：30px;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var olis = document.getElementsByTagname（ "li"）;
var show = document.getElementById（ "show"）;
for（var index = 0; index <olis.length; index ++）{
（function（index）{
olis [index] .onclick = function（）{
show.innerhtml = index;
}
}）（索引）
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li>一生懸命働くことによってのみ、明日はより良いことができます。 </li>
<li>共有と相互支援は、進歩の最大の原動力です。 </li>
<li>毎日が新しいです、それを大切にしてください。 </li>
<li>誰も最初からマスターではありません。一生懸命働くことによってのみ成長できます</li>
<li>現在の時間だけが貴重で、次の秒は幻想です</li>
</ul>
</body>
</html>
この記事の説明が、JavaScriptに基づいたすべての人のWebプログラミングに役立つことを願っています。