使用 JavaScript、onmouseover 和 onmouseout 更改 Div 内容？

Question

我有以下代码：

window.onload = function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];
        var n1 = document.createTextNode("Cell " + i);
        var n2 = document.createTextNode(i + " Cell");
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);
    }
    div.onmouseover = function() {
        this.appendChild(n1);
    },
    div.onmouseout = function() {
        this.appendChild(n2);
    } 
}

我想要实现的目标

1. 在每个 div 的鼠标悬停时，该 div 应该有一个单元格 1、单元格 2、..... 直到 cel 28 的文本。但我只是让每个单元格悬停在 Cell 28 上。

2。我也想实现那个onmouseout，单元格应该有“1 cell”作为文本，但它不起作用。

感谢任何帮助。

http://jsbin.com/iXuLEDE/7/edit?html,output

Answer 1

您的问题来自您对n1 和n2 的关闭。最简单的解决方案如下。

从这里：

div.onmouseover = function() {
    this.appendChild(n1);
}

到这里：

div.onmouseover = (function(text) {
      return function () {
          this.innerHTML = text;
      }
}(n1.textContent));

这样，您使用的是文本节点的副本（通过将其用作函数的参数），而不是稍后作为闭包。

更新

只需阅读问题的第二部分，这应该可以：

div.onmouseover = (function(text) {
    return function() {
        this.innerHTML = text;
    };
}("Cell " + i));
div.onmouseout = (function(text) {
    return function() {
        this.innerHTML = text;
    };
}(i + " Cell"));

使用文本节点

function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        var n1 = document.createTextNode("Cell " + i);
        var n2 = document.createTextNode(i + " Cell");
        body.appendChild(div);
        div.onmouseover = (function(n_text1, n_text2) {
          return function() {
              if (n_text2.parentNode == this) {
                  this.removeChild(n_text2);
              }
              this.appendChild(n_text1);
          };
        }(n1, n2));
        div.onmouseout = (function(n_text1, n_text2) {
          return function() {
              if (n_text1.parentNode == this) {
                  this.removeChild(n_text1);
              }
              this.appendChild(n_text2);
          };
        }(n1, n2));
    }
}

在这里提琴：http://jsfiddle.net/Mk5e5/

Answer 2

请改成这样

    window.onload = function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        div.setAttribute("index", i);
        var body = document.getElementsByTagName("body")[0];
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);
        div.onmouseover = function() {
          var n1 = document.createTextNode("Cell " + this.getAttribute("index"));
          this.appendChild(n1);

        } ,
        div.onmouseout = function() {
        var n2 = document.createTextNode(this.getAttribute("index") + " Cell");
          this.appendChild(n2);

        } 

    }
}

您应该在循环中为每个div 添加事件

Answer 3

尝试理解 javascript 闭包，特别是在 for 循环中。在这篇博文中查看这个出色的解释：http://www.mennovanslooten.nl/blog/post/62

将您的 createDivs 函数更改为：

function createDivs() { 

for(var i = 1;i<29;i++) {
    var div = document.createElement("div"); 
    var body = document.getElementsByTagName("body")[0];
    div.style.width = "100px";
    div.style.height  = "100px";
    div.style.border = "1px solid red";
    div.style.cssFloat = "left";
    div.style.margin = "1px"
    div.className = i;
    body.appendChild(div);
    div.onmouseover = (function(value) { 
        return function() {
            var n1 = document.createTextNode("Cell " + value);
            this.appendChild(n1);
        }
    })(i);
    div.onmouseout = (function(value) { 
        return function() {
            var n2 = document.createTextNode(value + " Cell");
            this.appendChild(n2);
        }
    })(i);

};

};

Answer 4

您的代码不起作用，因为当您的 onmouseover 和 onmouseout 函数被执行时，您的文本变量的值是“单元格 28”。另外，如果我正确理解您的意图，您的孩子被带走有点不对劲。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    function createDivs(n) { 
      for(var i = 1; i <= n; i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];

        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);

        div.onmouseover = function() {
          if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
          var n_text = document.createTextNode("Cell " + this.className);
          this.appendChild(n_text);
        },
        div.onmouseout = function() {
          if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
          var n_text = document.createTextNode(this.className + " Cell");
          this.appendChild(n_text);
        }  
      }   
    }

    createDivs(28)

  </script>

</body>
</html>

我还更改了您的 if 语句，以便您传递所需的单元格数量而不是单元格数量 +1。