Javascript：为多篇博文创建多读/少读功能

Question

JS 新手。我正在从头开始创建博客，并尝试实现阅读更多/阅读更少按钮。我能够在一个博客 post 上实现此功能，但如果我尝试将相同的 class 添加到其他博客 post 中，显然会出现问题，因为那样函数就赢了'确定要作用于哪些对象。

这是我现在拥有的。您会发现在博客 Post 1 上单击“阅读更多”/“少读”可以正常工作，但是当您在博客 Post 2 上单击“阅读更多”时，它会尝试运行博客上的函数 Post 1:

function readMoreFunction() {
    var dots = document.getElementById("dots");
    var contentText = document.getElementById("content");
    var btnText = document.getElementById("buttonReadMore");
  
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "Read More";
      contentText.style.display = "none";
    } else {
      dots.style.display = "none";
      btnText.innerHTML = "Read Less";
      contentText.style.display = "inline";
    }
  }

#content {
  display: none;
}

<p><strong>Blog Title</strong></p>

<p>Here is an example of the short snippet I want to show by default. <span id="dots">...</span></p>
<span id="content">
<p>Here is the longer text I want to show after the user clicks Read More.</p>
</span>
<button onclick="readMoreFunction()" id="buttonReadMore">Read More</button>

<p><strong>Blog Title 2</strong></p>

<p>Here is another short snippet I want to show by default for the second blog post. <span id="dots">...</span></p>
<span id="content">
<p>Here is the longer text I want to show after the user clicks Read More on the second blog post.</p>
</span>
<button onclick="readMoreFunction()" id="buttonReadMore">Read More</button>

基本上，当用户现在点击“阅读更多”时，省略号消失，隐藏的内容现在显示，按钮变为“少读”。当他们点击“Read Less”时，省略号将被插入到较短的片段部分，完整内容再次隐藏，按钮变回“Read More”。

没有为每个博客 class 赋予新的 class 名称并为每个博客 post 添加重复的 JS 代码并使用新的 class 名称，我怎么能为所有不同的博客 post 独立地为运行写一个函数？我是否需要实现类似“this”功能的东西，所以它只发生在被点击的本地“this”对象上？

我曾尝试研究我将如何做到这一点，但我能找到的都是使用 jQuery 的非常过时的 5 年以上的例子，我知道它现在已经过时了。你们能帮我指明正确的方向吗？

Answer 1

可能有多种解决方案，以下是对您的代码进行最少修改并使用“this”的解决方案：

function readMoreFunction(button) {
    var btnText = button;
    var contentText = button.previousElementSibling;
    var dots = contentText.previousElementSibling.children[0];
    
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "Read More";
      contentText.style.display = "none";
    } else {
      dots.style.display = "none";
      btnText.innerHTML = "Read Less";
      contentText.style.display = "inline";
    }
  }

.content{
  display: none;
}

<p><strong>Blog Title</strong></p>

<p>Here is an example of the short snippet I want to show by default. <span class="dots">...</span></p>
<span class="content">
<p>Here is the longer text I want to show after the user clicks Read More.</p>
</span>
<button onclick="readMoreFunction(this)" class="buttonReadMore">Read More</button>

<p><strong>Blog Title 2</strong></p>

<p>Here is another short snippet I want to show by default for the second blog post. <span class="dots">...</span></p>
<span class="content">
<p>Here is the longer text I want to show after the user clicks Read More on the second blog post.</p>
</span>
<button onclick="readMoreFunction(this)" class="buttonReadMore">Read More</button>

请记住，我们不能对 2 个或更多元素使用相同的 ID，对于整个 DOM.

中的一个元素，它应该是唯一的

除了传递 this，您还可以通过 onclick 调用传递索引，即 readMoreFunction(0)、readMoreFunction(1)，这适用于静态 html 情况。 previousSibling property.

Javascript：为多篇博文创建多读/少读功能

Javascript: Create Read More / Read Less Functionality for Multiple Blog Posts

javascript

this