使用最少的代码更改多个元素的 innerHTML答案

【问题标题】：Change innerHTML of multiple elements with least code possible使用最少的代码更改多个元素的 innerHTML
【发布时间】：2017-08-06 02:52:12
【问题描述】：

我有 6 个按钮，单击它们时，每个按钮都会在下面显示一个独特的 div。我只想在单击时更改所述按钮的innerHTML。我可以通过一个具有唯一 ID 的按钮轻松完成此操作：

<input type="checkbox" name="tabs" id="tab-one">
<label for="tab-one" id="one">Read More</label>

...另外 5 个带有相应标签的复选框。

var tabLabel = document.getElementById('one');
tabLabel.addEventListener("click", function() {
  if (this.innerHTML=="Read More") {
    this.innerHTML = "Collapse";
  } else {
    this.innerHTML = "Read More";
  }
});

我的问题是如何将这个 JavaScript 块变成适用于所有 6 个唯一标签的东西？这一定很简单。

【问题讨论】：

标签： javascript innerhtml getelementbyid

【解决方案1】：

您可以将这对值存储在元素data-* 属性中，该属性将.dataset 属性设置为JSON，在事件处理程序中转换为JavaScript 对象，将.textContent 设置为结果数组的非当前元素元素，重复过程。

onload = () => {
  for (let label of document.querySelectorAll("label[for]")) {
    label.onclick = () => {
      let [curr, next, {textContent}] = [...JSON.parse(label.dataset.t), label];
      label.textContent = textContent === curr ? next : curr;
    }
  }
}

<label for="tab-one" id="one" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-two" id="two" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-three" id="three" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-four" id="four" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-five" id="five" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-six" id="six" data-t='["Read More", "Collapse"]'>Read More</label>

【讨论】：

【解决方案2】：

回显到@jackton，您可以将this 作为参数传递给事件处理程序，这样您就不需要通过调用getElementById 来检索元素。事件处理程序可以实现为：

var textArray = ['Collapse', 'Read More'...]; // put all your ping-pong text in this array

function onClick(el) {
    let idx = textArray.indexOf(el.innerHTML);
    el.innerHTML = textArray[idx % 2? idx - 1, idx + 1];
}

【讨论】：

【解决方案3】：

您可以使用事件代理，即将事件处理程序附加到六个按钮的父节点。

处理函数应该检查实际点击了哪个按钮。您可以使用event.target 属性来实现这一点。然后改变目标元素（点击的按钮）的innerHTML。

var labelsParent = document.getElementById('one').parentNode;
labelsParent.addEventListener("click", function(event) {
    var target = event.target || event.srcElement;
  if (target.innerHTML=="Read More") {
    target.innerHTML = "Collapse";
  } else {
    target.innerHTML = "Read More";
  }
});

【讨论】：

【解决方案4】：

感谢大家的回答，但我使用了一个简单的forEach，并为每个标签赋予了相同的class。完美运行。向@guest271314 大喊，他的回答也奏效了。

<input type="checkbox" name="tabs" id="tab-one">
<label for="tab-one" class="one">Read More</label>

var elements = document.querySelectorAll('.one');
elements.forEach(function(elem) {
  elem.addEventListener("click", function() {
    if (this.innerHTML=="Read More") {
      this.innerHTML = "Collapse";
    } else {
      this.innerHTML = "Read More";
    }
  });
});

【讨论】：