1

オブジェクトからキーをドロップするボタンを動的に作成したいと考えています。ただし、この時点では、キーを削除する関数に後で渡される正しい値をテストするためにアラートを使用しているだけです。for-in ループを実行しており、ループ内で呼び出される関数に反復子を渡そうとしています。問題は、アラート ステートメントが反復子 'i' を使用しており、ループが終了すると、このアラートのすべてのインスタンスが 'i' の最終値に変更されていることです。（それが理にかなっていることを願っています！）

    locations = {};

function Location(nickname, address) {
    this.nickname = nickname;
    this.address = address;
}

Location.prototype.showLocations = function() {
    var x=document.getElementById("demo");
    output = "<table><tr><th>Location</th><th>Address</th><th>Delete</th></tr>";
    for (i in locations) (function(i)
    {
        output+=listThis(i);           

    }) (i);
    // for (i in locations) {
    //      output+=listThis(i);
    //     }
    output+="</table>"
    x.innerHTML=output;
}

function listThis(i){
    thisLoc = locations[i].nickname;
    var thisOutput="<tr><td>"+locations[thisLoc].nickname+"</td><td>"+locations[thisLoc].address+"</td><td><input type='button' value='X' onclick='alert(locations[thisLoc].nickname)' /></td></tr>";
    return thisOutput;
}

function enterLocation() {
    var address = document.getElementById('address').value;
    var nickname = document.getElementById('nickname').value;
    locations[nickname] = new Location(nickname, address);
    locations[nickname].showLocations();
}

マークアップは次のとおりです。

<p id="demo">Table to go in here.</p>
<div id="panel">
    <input id="nickname" type="textbox" placeholder="Location Name" />
    <input id="address" type="textbox" placeholder="Sydney, NSW" />
    <input type="button" value="Enter" onclick="enterLocation()" />
</div>

この投稿Javascript - how to work with the iterator in a for loop with callbacks で見つかった情報を操作しようとしたが、成功しなかったことに注意してください。私が最初に試していた別の for ループがコメントアウトされていることがわかります。

4

2 に答える 2

2

問題はインライン onclick ハンドラにあります。

You write onclick='alert(locations[thisLoc].nickname)'and herethisLocは変数への直接参照ではありません。実行時に評価される名前です。

オンラインでグローバル変数thisLoc = locations[i].nickname;を定義します。この値は反復ごとに上書きされます。その後、このグローバル変数が処理されると、(常に) 最新の値がアクセスされます。thisLoconclick

それにはいくつかの解決策があります：

  • minitech が言ったように HTML 構築を使用しないでください – DOM 操作を使用してください

  • 構築中にいくつかの DOM 属性に値を書き込み、onclickハンドラーでそれを読み取ります。

    "<input type='button' value='X' data-location-name="' + thisLoc + '" onclick='alert(locations[this.getAttribute('data-location-name')].nickname)' />"
于 2013-10-31T01:37:26.993 に答える