Javascript ループ バインディング イベントのサンプル コード_JavaScript ヒント

例: 無限の長さのリスト。マウスが特定の項目の上を通過すると背景が変わります。

<title>無題のページ</title> <ul id="list"> <li>レコード 1</li> <li>レコード 2</li> <li>レコード 3</li> <li>レコード 4</li> <li>レコード 5</li> <li>レコード 6</li> </ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

これこの例では、グループ オブジェクト バインディング イベント ハンドラー関数にループします。
ただし、これに基づいていくつかの要件を追加すると。たとえば、特定のレコードをクリックすると、これはどのレコードですか?
おそらくあなたは当然のようにこれを書くでしょう:

<title> </title>無題のページ <ul id="list"> <li> </li>レコード 1<li> </li>レコード 2<li> </li>レコード 3<li> </li>レコード 4<li> </li>レコード 5<li> </li>レコード 6</ul>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

テストこれでアラートが見つかります。 出てくるものは次のとおりです: これは 6 番目のレコードです
実際、ここの for ループはリスト全体を循環して i を実行したので、ここの i は 6 になります。
何か良い方法はありますか?この問題を解決するには？
それがクロージャです。個人的には、クロージャは js で最もとらえどころのないものの 1 つだと思います。
クロージャとは何かを見てください:
クロージャとは、たとえ外部関数の実行が終了しました。

この例では、次のことができます: <title> </title> 無題のページ <ul id="list"> <li> </li> <li>レコード 1</li> <li>レコード 2</li> <li>レコード 3</li> <li>レコード 4</li> <li>レコード 5</li> </ul>レコード 6

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
] PS: 閉じるのは難しく、非常に複雑です。