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

Question

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

我想根据这篇文章实现一个阅读更多/更少按钮。

这工作得很好，因为它有唯一的 id。但是，当我在具有相同 id的多个读取更多块中实现此功能时，它仅触发第一个元素。

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

这是我的代码。

如您所见，它对第一个 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>

标签： javascripthtmlcssfrontend

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>