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);
    } 
}

我想要实现的目标

在每个div的鼠标悬停时，div应该有一个单元格1的单元格，单元格2，.....最多28个单元格。但是我只是将单元格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。

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

4 个答案: