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

Question

我是 JS 的新手。所以，请原谅我提出这样愚蠢的问题。

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

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

我在 wrapper 类的父 div 下有两个 div，id card1 和 card2。我想显示点击阅读更多 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. 切换类(class)
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>