-2

JavaScriptを使用して2D配列で作成されたdivタグの値を取得して表示する方法を見つけようとしています。onclick または onmouseover のいずれかが機能すると考えましたが、このアプローチではどちらも機能しません。同じことを行う 49 個の関数を作成することは避けたいと思います (マウスが置かれている「セル」を表示するだけです)。

<style type="text/css">
  .float {float: left;}
  .clear {clear:both;}
  div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
    <div id="grid"></div>
    <div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  // ???
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

ありがとう！

4

2 に答える 2

0

this.id を関数に渡すだけで、セル ID を取得できます。

これを試して：

<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  console.log(cellId);
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>
于 2013-05-15T16:18:28.507 に答える
-1

これで、イベントが発生するdisplayMeたびに関数を呼び出すように各セル要素を設定しました。mouseoverその関数を呼び出すと、変数cellIdが引数として渡されます。問題は、その関数が呼び出されたとき、cellId定義されていないことです。このエラーは、ブラウザの開発者コンソールに表示されます ("Uncaught ReferenceError: cellId is not defined")。

idおそらく、ここで動的に定義するセル要素のプロパティを渡したいと思うでしょう: id='area" + i + j + "'. 要素のプロパティを使用しidて要素を検索し (既に行ったように)、 を介して含まれるテキストを取得できますtextContent。

セル要素のプロパティを渡すには、次のように変数idを使用する必要があります。イベントをトリガーしている要素を参照します。したがって、div 要素の値を this:に変更すると、適切な値が関数に渡され、次のようなことが可能になります。thisthis.idthisonmouseoveronmouseover='displayMe(this.id)'displayMe

function displayMe(cellId) {
    document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}

これらの調整により、コード全体は次のようになります。

<style type="text/css">
  .float {float: left;}
  .clear {clear:both;}
  div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
    <div id="grid"></div>
    <div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>
于 2013-05-15T16:43:50.627 に答える