js liリストにクリックイベントを追加

2355 ワード

今日面接のテーマを見ました.

//html  
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
body>
//js  
var oli = document.getElementsByTagName("li");
    for(var i=0; i<oli.length; i++){
        oli[i].onclick = function () {
            alert(i);
        };

各liにクリックイベントを追加し、現在のindex値を印刷したい.明らかにこのように書いても最終的な結果は実現していない.どちらのliをクリックしても1つだけ印刷された結果は3です.私たちが望んでいるものは手に入らなかった.いったい何が原因なのか.onclickはイベントで、このイベントが依頼されてトリガーされず、トリガーされたときだけコールバック関数が呼び出され、コードが上から下へ実行されるとiの値が3になったので、クリックイベントごとにコールバック結果が3になります.では、どうやって実現するのでしょうか.次のコードを見てください.

var oli = document.getElementsByTagName("li");
    for(var i=0; ifunction(j){
            oli[j].onclick = function () {
            alert(j);
        };
        }）(i)

これで異なるliをクリックすると対応するIndex値が印刷されます.はっきり言ってiの役割ドメインを変えて、彼の値を保留して、上のコードiの役割ドメインはグローバルなので、印刷の結果はすべて3で、今は実パラメータとして匿名の関数の中に伝達して、呼び出して、形パラメータになって事件の中に書いて、このように彼の役割ドメインを変えて、つまり彼の元の値を保留しました.その結果、飲み物のindex値が印刷されます

プロジェクト実践:銀行貯蓄システムの設計と実現

回転する太極円(1)