用尽可能少的代码更改多个元素的 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

可以使用事件代理，将事件处理器附加到六个按钮的父节点上。

处理函数应该检查实际点击了哪个按钮。您可以使用 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";
  }
});

Answer 2

您可以将这对值存储在元素 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>

Answer 3

Echo 给@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];
}

Answer 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";
    }
  });
});

用尽可能少的代码更改多个元素的 innerHTML

Change innerHTML of multiple elements with least code possible

javascript

innerhtml

getelementbyid