2

Javascript で奇妙な問題が発生しました。与えられたのは、テーブルを作成しようとする特定の形式の文字列です。

テーブルには行ごとにセルのみがあり、文字列の形式は次のとおりです。
各セル (行) ごとにコンテンツを表示する必要があります
@ユーザーが表示された上にマウスを移動すると呼び出されるイベント ハンドラー
に渡されるパラメーターonmouseover文章。

JS コード:

// the string of format
var stringProof = document.getElementById("stringProof").value;
var arrayOfProof = stringProof.split("#");

// find the table
var table = document.getElementById("proofTable");
// remove what's within
table.innerHTML = "";

for(var i = currentIndex*4;i < end;i++)
{
    // iterative create the text, span, cell and row
    var currentStepProof = arrayOfProof[i];
    var elementsInCurrentStepProof = currentStepProof.split("@");

    var tr = document.createElement("tr");
    var td = document.createElement("td");

    var span = document.createElement("span");
    span.onmouseover = function() {alert(elementsInCurrentStepProof[1]);};
    var text = document.createTextNode(elementsInCurrentStepProof[0]);
    span.appendChild(text);
    td.appendChild(span);
    tr.appendChild(td);
    table.appendChild(tr);
}

問題は、onmouseover関数がトリガーされる行は関係なく、最後の行のパラメーターのみを警告することです。これは、最後の行のonmouseover関数のパラメーターが前の行の関数に渡されたものを上書きすることを意味しますonmouseover。

何かご意見は？どうもありがとう!!~~

4

2 に答える 2

1

すべてのハンドラー関数は、まったく同じ「elementsInCurrentStepProof」変数を共有します。そのループの反復ごとに変化するためfor、すべてのハンドラーは最終状態 (最後の反復の状態) でそれを「認識」します。

次のように、各ハンドラーに独自の値のコピーを与えることができます。

span.onmouseover = function(element) {
  return function() { alert(element); }
}(elementsInCurrentStepProof[1]);

中間関数を使用して、値のコピー用の新しいストレージ スコープ (クロージャ) を作成します。その変数の値は配列への参照であるため、「elementsInCurrentStepProof」のコピーを作成するだけでは不十分であることに注意してください。要素 1 の値を渡す必要があります。

于 2013-05-29T23:44:54.397 に答える
0

これはトリックを行います：

http://jsfiddle.net/BhLfk/

var span = document.createElement("span");
span.data = elementsInCurrentStepProof[1];
span.onmouseover = function(event) {alert(event.target.data);};

あなたの質問にはいくつかの情報が欠けているため、あなたが何をしようとしているのかを理解するのが少し難しくなっていることに注意してください.

于 2013-05-30T00:05:30.883 に答える