1

次のコードがあります。

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、.....セル28までのテキストが必要です。しかし、各セルのホバーでセル28を取得しています。

2. onmouseout も実現したいのですが、セルには1 cellテキストとして " " が必要ですが、機能しません。

どんな助けでも大歓迎です。

http://jsbin.com/iXuLEDE/7/edit?html、出力

4

4 に答える 4

0

特に for ループ内での 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);

};

};

于 2013-08-24T07:19:41.563 に答える
0

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 の代わりに必要なセル数を渡すようにしました。

于 2013-08-24T07:21:45.273 に答える