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

我有6个按钮，当点击时，每个按钮都会在下面显示一个独特的

div

。我只想在点击时更改所述按钮的

innerHTML

。我可以通过一个具有唯一ID的按钮轻松完成此操作：

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

---

我的问题是如何将这段JavaScript转换为适用于所有6个唯一标签的内容？这必须很简单。

您可以使用事件代理，它将事件句柄附加到六个按钮的父节点

处理函数应该检查实际单击了哪个按钮。您可以使用

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

---

您可以使用事件代理，它将事件文件夹附加到六按钮的父节点

处理函数应该检查实际单击了哪个按钮。您可以使用

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

---

您可以在元素

data-*

属性处存储这对值，该属性将

.dataset

属性设置为

JSON

，在事件处理程序处转换为JavaScript对象，将

.textContent

设置为结果数组中不是当前元素的元素，重复该过程

onload=（）=>{
for（让document.querySelectorAll的标签（“label[for]”）{
label.onclick=（）=>{
让[curr，next，{textContent}]=[…JSON.parse（label.dataset.t），label]；
label.textContent=textContent==curr？下一步：curr；
}
}
}

阅读更多
阅读更多
阅读更多
阅读更多
阅读更多
阅读更多内容

您可以在元素

数据-*

属性处存储这对值，该属性将

.dataset

属性设置为

JSON

，在事件处理程序处转换为JavaScript对象，将

.textContent

设置为结果数组中不是当前元素的元素，重复该过程

onload=（）=>{
for（让document.querySelectorAll的标签（“label[for]”）{
label.onclick=（）=>{
让[curr，next，{textContent}]=[…JSON.parse（label.dataset.t），label]；
label.textContent=textContent==curr？下一步：curr；
}
}
}

阅读更多
阅读更多
阅读更多
阅读更多
阅读更多
阅读更多

Echo to@jackton，您可以将其作为参数传递给事件处理程序，这样您就不需要通过调用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];
}

---

回显到@jackton，您可以将其作为参数传递给事件处理程序，这样您就不需要通过调用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];
}

---

谢谢大家的回答，但我使用了一个简单的

forEach

，并给每个标签相同的

类

。工作完美。向@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";
    }
  });
});

阅读更多
var elements=document.querySelectorAll（'.one'）；
元素。forEach（函数（elem）{
元素addEventListener（“单击”，函数（）{
if（this.innerHTML==“阅读更多”）{
this.innerHTML=“Collapse”；
}否则{
this.innerHTML=“阅读更多”；
}
});
});

谢谢大家的回答，但我用了一个简单的

forEach

，给每个标签上相同的

类。工作完美。向@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";
    }
  });
});


阅读更多
var elements=document.querySelectorAll（'.one'）；
元素。forEach（函数（elem）{
元素addEventListener（“单击”，函数（）{
if（this.innerHTML==“阅读更多”）{
this.innerHTML=“Collapse”；
}否则{
this.innerHTML=“阅读更多”；
}
});
});