Javascript 多个事件处理程序仅在第一个元素上启动，而不是在目标上启动

所以我正在尝试制作一个多/少内容切换功能，它工作得很好，直到我开始添加更多要切换的框。我读过关于使用多个事件处理程序的书，建议使用document.getElementsByClassName（）；并遍历它们，但单击第二个按钮时不会显示/隐藏正确的内容，仅显示第一个

感谢您的帮助。更简单的方法是使用jQuery或为按钮分配不同的ID，并在每个按钮上调用函数，但我确信只需创建/调用事件监听器一次，并让它在随后添加的每个元素上工作就可以了

这是我的密码：

HTML

<div class="card">
  <div class="cardLessContent">
    <h1>Here is a card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
  </div>
  <div id="cardMoreContent" class="cardMoreContent">
    <p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
  </div>
  <button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>

<div class="card">
  <div class="cardLessContent">
    <h1>Here is a card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
  </div>
  <div id="cardMoreContent" class="cardMoreContent">
    <p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
  </div>
  <button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>

这是一张卡片
Lorem ipsum dolor sit amet，是一位杰出的献身者。索利西图丁拍卖行、托托·埃吉特拍卖行、精英拍卖行。狮子座前前庭，前庭，前庭，前庭，前庭

Nam finibus nec奥古斯在森佩尔。这是一个很好的例子。酒后驾车，孕妇，拍卖人佩伦茨克·维利特

更多
这是一张卡片
Lorem ipsum dolor sit amet，是一位杰出的献身者。索利西图丁拍卖行、托托·埃吉特拍卖行、精英拍卖行。狮子座前前庭，前庭，前庭，前庭，前庭

Nam finibus nec奥古斯在森佩尔。这是一个很好的例子。酒后驾车，孕妇，拍卖人佩伦茨克·维利特

更多

JavaScript

const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");

var toggleContent = function() {
    cardMoreContent.classList.toggle("showing");
    this.classList.toggle("toggledOff");

    if(this.classList.contains("toggledOff")) {
      this.innerHTML = "More";
    }
    else {
      this.innerHTML = "Less";
    }
}

for (var i = 0; i < btnToggleContent.length; i++) {
  btnToggleContent[i].addEventListener("click", toggleContent);
}

const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");

var toggleContent = function(e) {
    e.target.previousElementSibling.classList.toggle("showing");
    this.classList.toggle("toggledOff");

    if(this.classList.contains("toggledOff")) {
      this.innerHTML = "More";
    }
    else {
      this.innerHTML = "Less";
    }
}

for (var i = 0; i < btnToggleContent.length; i++) {
  btnToggleContent[i].addEventListener("click", toggleContent);
}

const btntoglecontent=document.getElementsByClassName（“toggleContent”）；
const cardMoreContent=document.getElementById（“cardMoreContent”）；
var toggleContent=function（）{
cardMoreContent.classList.toggle（“显示”）；
this.classList.toggle（“toggledOff”）；
if（this.classList.contains（“toggledOff”））{
this.innerHTML=“更多”；
}
否则{
this.innerHTML=“Less”；
}
}
对于（变量i=0；i

---

jsIDLE:

是的，仅适用于第一个。这就是原因： 您对多个元素使用了“id=”toggleContent“”相同的id值，这在basic中是错误的

Id属性必须是uniq

使用此答案中的示例：

您将只需要子节点并循环trow它

---

请相信，您也可以从child元素中搜索child…

Id属性在HTML中应该是唯一的。否则，它将只选择该Id的第一个出现。在您的情况下，您将始终切换第一个

cardMoreContent

下面是一个使用

event.target

Javascript

const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");

var toggleContent = function() {
    cardMoreContent.classList.toggle("showing");
    this.classList.toggle("toggledOff");

    if(this.classList.contains("toggledOff")) {
      this.innerHTML = "More";
    }
    else {
      this.innerHTML = "Less";
    }
}

for (var i = 0; i < btnToggleContent.length; i++) {
  btnToggleContent[i].addEventListener("click", toggleContent);
}

const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");

var toggleContent = function(e) {
    e.target.previousElementSibling.classList.toggle("showing");
    this.classList.toggle("toggledOff");

    if(this.classList.contains("toggledOff")) {
      this.innerHTML = "More";
    }
    else {
      this.innerHTML = "Less";
    }
}

for (var i = 0; i < btnToggleContent.length; i++) {
  btnToggleContent[i].addEventListener("click", toggleContent);
}

const btntoglecontent=document.getElementsByClassName（“toggleContent”）；
const cardMoreContent=document.getElementById（“cardMoreContent”）；
var-toggleContent=函数（e）{
e、 target.previousElementSibling.classList.toggle（“显示”）；
this.classList.toggle（“toggledOff”）；
if（this.classList.contains（“toggledOff”））{
this.innerHTML=“更多”；
}
否则{
this.innerHTML=“Less”；
}
}
对于（变量i=0；i

---

jsiddle:

删除所有ids属性后，将javascript代码更改为：

const btntoglecontent=document.getElementsByClassName（“toggleContent”）；
var-toggleContent=函数（e）{
/*e、 target将获得clicked元素，即单击的按钮和parentElement
提供此按钮的父元素，即要修改的卡*/
var card=e.target.parentElement；
/*当您拥有该卡时，您可以在其getElementsByClassName上使用它来检索所有
具有类（cardMoreContent）的元素在本例中只有一个
数组中的第一个元素返回了[0]*/
var cardMoreContent=card.getElementsByClassName（“cardMoreContent”）[0]；
//然后代码的其余部分保持不变
cardMoreContent.classList.toggle（“显示”）；
if（this.classList.contains（“toggledOff”））{
this.innerHTML=“更多”；
}
否则{
this.innerHTML=“Less”；
}
}
对于（变量i=0；i

您对多个元素使用相同的id（cardMoreContent）。id是唯一的—在多个元素中不能使用相同的id