-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没有定义。您可以在浏览器的开发人员控制台中看到此错误弹出（“未捕获的 ReferenceError：cellId 未定义”）。

您可能想要传递单元格元素的id属性，您可以在此处动态定义该属性：id='area" + i + j + "'. 您可以使用元素的id属性来查找元素（正如您已经完成的那样），并通过textContent.

要传递单元格元素的id属性，您需要使用this变量，如下所示this.id：this将引用触发事件的元素。因此，如果您onmouseover将 div 元素的值更改为 this: onmouseover='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 回答