如何在父元素中专门调用一个 ID 并忽略具有相同 ID 的所有其他元素（使用纯 JS）？

Question

我对 JS 还很陌生。所以，请原谅我问了这么愚蠢的问题。

我想实现一个基于this article 的阅读更多/更少按钮。

这工作得很好，因为它有唯一的 id。但是，当我在具有 same id 的多个 read more 块中实现这一点时，它只会触发第一个元素。

我在 wrapper 类的父 div 下有两个 id 为 card1 和 card2 的 div。我想显示点击阅读更多 div（比如说card1）并完全隐藏另一个 div（card2）（反之亦然）。

这里是my code。

如您所见，对于第一个 div (card1)，它非常好，但由于 使用相同 id 的矛盾，它不能为其他 div 工作。

可以在单击按钮的地方专门调用父 div 的 id，而忽略具有相同 id 的其他 div 的元素。还有其他简单的方法可以解决我的问题吗？

目前还不懂jQuery，所以，用纯JS解决问题会很有帮助。

谢谢。

function myFunction(t) {
  var x = document.getElementById(t.id).parentNode;
  var y = x.parentNode;
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
    y.style.visibility = "visible";
  } else {
    y.style.visibility = "hidden";
    x.style.visibility = "visible";
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

#more {
  display: none;
}

<div class="wrapper">
  <div id="card1">
    <h2>Read More Read Less </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button onclick="myFunction(this)" id="myBtn">Read more</button>
  </div>
  <div id="card2">
    <h2>Read More Read Less 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button onclick="myFunction(this)" id="myBtn">Read more</button>
  </div>
</div>

Answer 1

几件事

• ID 需要唯一，使用类
• 不建议使用内联事件处理程序 - 您的代码是委托的完美目标

所以我

1. 创建了一个隐藏类并将其添加到需要从一开始就隐藏的内容中
2. 切换课程
3. 根据隐藏类的存在更改文本

document.getElementById("wrapper").addEventListener("click", function(e) {
  const tgt = e.target.closest("button"); // in case you want something inside the button
  if (tgt && tgt.classList.contains("readMoreBtn")) {
    const parent = tgt.closest(".card");
    const dots = parent.querySelector(".dots");
    const moreText = parent.querySelector(".more");
    dots.classList.toggle("hide")
    moreText.classList.toggle("hide")
    tgt.innerHTML = moreText.classList.contains("hide") ? "Read more" : "Read less";
  }
})

body {
  background: #111;
  color: #eee;
}

.hide {
  display: none;
}

<div id="wrapper">
  <div class="card" id="card1">
    <h2>Read More Read Less </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more hide">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button type="button" class="readMoreBtn">Read more</button>
  </div>
  <div class="card" id="card2">
    <h2>Read More Read Less 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more hide">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button type="button" class="readMoreBtn">Read more</button>
  </div>
</div>