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 回答