javascript - 用最少的代码更改多个元素的innerHTML

Question

我有 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 个唯一标签的内容？这一定很简单。

Answer 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>