为什么我的函数只能使用一个 ID？ [复制]答案

【问题标题】：Why is my function working only with one ID? [duplicate]为什么我的函数只能使用一个 ID？ [复制]
【发布时间】：2019-08-06 21:45:15
【问题描述】：

我正在尝试将这种颜色设置为“正方形”，点击后会改变颜色。在第一个上它工作正常，但是当我单击其他时，颜色会发生在第一个上。

var image_tracker = 'red';

function changeColor() {
  var image = document.getElementById('red')
  if (image_tracker == 'red') {
    image.style.backgroundColor = "blue";
    image_tracker = 'blue';
  } else {
    image.style.backgroundColor = "red";
    image_tracker = 'red';
  }
}

<div id="red" onclick="changeColor()"></div>
<div id="red" onclick="changeColor()"></div>
<div id="red" onclick="changeColor()"></div>

没有错误消息，它只是不像我期望的那样工作：D

【问题讨论】：

您有重复的 ID，这是无效的标记，以及为什么它不能像您期望的那样工作。改用类。见this post。
另一个。 stackoverflow.com/questions/3607291/…
以上所有，但还要注意函数名称 - getElementById 得到一个元素（不是元素）。 getElementsByClassName（更适合您的要求）获取 elements（复数）。（不，没有getElementsById，因为应该只有 1 个具有唯一 ID 的元素）
切换一个类来维护状态，比用变量搞清楚要容易得多。
使用querySelectorAll，是的，使用类而不是id的

标签： javascript html css

【解决方案1】：

ID 必须是唯一的，document.getElementById() 只会返回找到的第一个元素。它不知道你点击了哪个元素。

更改您的函数以将image 作为参数。然后你可以使用this 来引用被点击的元素。

var image_tracker = 'red';

function changeColor(image) {
  if (image_tracker == 'red') {
    image.style.backgroundColor = "blue";
    image_tracker = 'blue';
  } else {
    image.style.backgroundColor = "red";
    image_tracker = 'red';
  }

}

<div onclick="changeColor(this)">1</div>
<div onclick="changeColor(this)">2</div>
<div onclick="changeColor(this)">3</div>

【讨论】：

不是反对者，但我认为 image_tracker 的逻辑是错误的。
@Archer 我已经添加了解释。
@epascarello 可能他真正想要的解决方案是切换课程。
var image_tracker 仍然是完全错误的，它是所有 3 个 div 都在使用的公共 var，=> 完全删除它，然后检查 (mage.style.backgroundColor == "red")

【解决方案2】：

鉴于您有多个共享共同行为的“红色”按钮（即可点击、行为相同等），请考虑通过 class 而不是 id 对元素进行“分类”：

var image_tracker = 'red';

/* Iterate all elements with "red" class */
for (const redElement of document.querySelectorAll('.red')) {

  /* Add click event handler */
  redElement.addEventListener('click', function() {
  
    /* Reuse existing click logic but based on redElement instead */
    if (image_tracker == 'red') {
      redElement.style.backgroundColor = "blue";
      image_tracker = 'blue';
    } else {
      redElement.style.backgroundColor = "red";
      image_tracker = 'red';
    }
  });
}

<!-- Define buttons as of the "red" class (and remove the "id") -->
<div class="red">Button 1</div>
<div class="red">Button 2</div>
<div class="red">Button 3</div>

您还将在上面看到，内联“onclick”已从 HTML 中删除，以支持通常首选的基于 addEventListener() 的事件处理方法。希望对您有所帮助！

【讨论】：