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

Change Div Content with JavaScript, onmouseover and onmouseout?

本文关键字：更改 Div 内容 onmouseout JavaScript onmouseover 使用      更新时间：2023-09-26

我有以下代码：

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的mouseover上，div应该有一个单元格1、单元格2、…的文本。。。。。至cel 28。但我只是让28号细胞悬停在每个细胞上

2.我也想在mouseout中实现，单元格应该有"1 cell"作为文本，但它不起作用

感谢您的帮助。

http://jsbin.com/iXuLEDE/7/edit?html，输出

您的问题来自于对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));
    }
}

Fiddle here：http://jsfiddle.net/Mk5e5/

请像这样更改代码

    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添加事件

试着理解javascript闭包，特别是循环内部的闭包。请查看此博客文章中的精彩解释：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);
};

}；

您的代码不起作用，因为当执行onmouseover和onmouseout函数时，文本变量的值为"cell 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。

相关文章：