Question

我有6个按钮，当点击时，每个按钮都显示下面的唯一declare。我只想在点击时更改div个按钮。我可以使用一个具有唯一ID的按钮轻松完成此操作：

innerHTML

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

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

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

Answer 1

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

＆＃13;

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;
    }
  }
}

＆＃13;

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

＆＃13;

Answer 2

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

处理程序函数应检查实际单击了哪个按钮。您可以使用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 3

回显@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

感谢大家的答案，但我使用了一个简单的I2?并为每个标签指定了相同的forEach。完美的工作。向@ guest271314大喊大叫，他的回答也有效。

class

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

4 个答案: