Question

我有2个方格。我希望当我点击一个时，它会变黑，而另一个则不会停留。它的工作，但我给了他们相同的功能和ID，所以当我点击第一个，它运作良好，但当我点击第二个，它是第一个只改变。我知道什么是错的，但我不知道如何纠正它而不必为所有ID创建一个函数。

我们说我想要100个方格，我该怎么办？

＆＃13;

function myFunc() {
  var element = document.getElementById("cc");
  element.classList.toggle("th");
}

＆＃13;

table,
th,
td {
  border: solid black 1px;
  width: 100px;
  height: 100px;
}

.th {
  background-color: black;
}

＆＃13;

<table>
  <tr>
    <th onclick="myFunc(this)" id="cc"></th>
    <th onclick="myFunc(this)" id="cc"></th>
  </tr>
</table>

＆＃13;

Answer 1

在您传递的链接中查找代码，如评论中所述，将this作为参数传递，然后在函数内部，您不需要找到元素，您已经在参数中使用了它，因此它很容易维护并且可以执行您想要的操作。 / p>

function myFunc(elem) {
   elem.classList.toggle("th");
}

table, th, td {
   border:solid black 1px;     
   width:100px;
   height:100px;
}
.th {
  background-color:black;
}

<table>
  <tr>
    <th onclick="myFunc(this)"></th>
    <th onclick="myFunc(this)"></th>
    <th onclick="myFunc(this)"></th>
    <th onclick="myFunc(this)"></th>
    <th onclick="myFunc(this)"></th>
    <th id="cc"></th>
  </tr>
</table>

此外，更加强烈的方式是不分配任何内联onclick，向所有<th>添加公共类，然后在javascript中使用{{向该类添加一个侦听器到所有元素，使用{{ 1}}在函数内部。

Answer 2

对于较少的标记，您可以在所有th

上绑定点击事件

var th = document.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    this.classList.toggle("th");
  });
}

th,
td {
  border: solid black 1px;
  width: 100px;
  height: 100px;
}

.th {
  background-color: black;
}

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

Answer 3

您的函数是将第一个方块存储在带有cc标识符的变量中。

相反，您应该传递单击元素的引用并将该元素存储在变量中。这样，点击的元素将被切换。

function myFunc(ref) {
   var element = document.getElementById(ref.id).innerHTML;
   element.classList.toggle("th");
}

请注意，还必须在函数调用中添加this。

独立元素的功能相同

3 个答案: