如何使用getElementsById或ClassName通过Javascript添加几个“更多"和“更少"按钮? [英] How to add several Read More and Read Less buttons through Javascript using getElementsById or ClassName?

问题描述

每个人.最近，我一直在努力通过Javascript添加阅读更多"和阅读减少"按钮.我只能通过选择一个ID对一个特定元素执行一次操作.但是，我希望对于其他几个类似的元素也能多次发生.我尝试将ID或类名存储在变量中，然后遍历它，但是它不起作用.您能否看一下Javascript代码，并建议我如何为其他几个元素实现相同的功能.这是一个正常工作的元素的代码.我想要这几个段落.这是HTML.

everyone. Recently, I have been working to add 'Read More' and 'Read Less' buttons through Javascript. I am able to do that only once for one specific element by picking its ID. But, I want that to happen several times for several other similar elements. I tried storing the IDs or Classnames in a variable and then looping through it but it's not working. Can you please have a look at the Javascript code and suggest how can I achieve the same functionality for several other elements. Here's the code for one element that's working fine. I want this for several paragraphs. This is the HTML.

  <p style="font-size:1.1em; margin-top:25px; margin-bottom:15px;">This is Lorem Ipsum. This is Lorem Ipsum. <span id="dots">...</span> <span style="display:none;" id="more"> This is the hidden text. This is the hidden text. </span> 
 </p>
 <a id="myBtn" style="cursor:pointer; margin-bottom:1em; font-weight:bold;" onclick="myFunction()">Show More</a>         

这是Javascript.

This is the Javascript.

 function myFunction() {
  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";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read Less"; 
    moreText.style.display = "inline";
  }
}

现在，在这种情况下，单击更多"或更少"按钮时将调用myFunction(). ID为更多"的文本被隐藏，点代表可见内容末尾的一些点.

Now, in this, myFunction() is called when the Read More or Read Less buttons are clicked. The text with ID 'more' is hidden and dots represent some dots at the end of visible content.

现在，我希望这种情况发生在具有相同ID或类名的多个段落中.我尝试使用循环来实现这一点，但收到错误未定义的错误myFunction未定义".我相信我没有正确设置循环过程.

Now I want this to happen for multiple paragraphs with the same IDs or Classnames. I tried using loops to achieve that but getting the error "uncaught error myFunction is not defined". I believe I did not set the looping process correctly.

如果有人可以帮助我找到解决此问题的可行方法，我们将不胜感激.预先感谢大家.

Would appreciate if someone could help me find a workable solution to this issue. Thank you in advance to everyone.

推荐答案

您可以使用一些CSS来切换类以显示/隐藏跨度，例如:

You can toggle a class to show/hide the spans, using some CSS, like this:

document.querySelectorAll(".showmore").forEach(function (p) {
  p.querySelector("a").addEventListener("click", function () {
    p.classList.toggle("show");
    this.textContent = p.classList.contains("show") ? "Show Less" : "Show More";
  });
});

.showmore {
  font-size: 1.1em;
  margin-top: 1.5em;
}

.showmore .more, .showmore.show .dots {
  display: none
}

.showmore.show .more {
  display: inline
}

.showmore a {
  cursor: pointer;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-weight: bold;
}

<p class="showmore">This is Lorem Ipsum. This is Lorem Ipsum. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

<p class="showmore">And here is a second paragraph. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

代码首先循环遍历所有段落，然后在内部抓取<a>并分配单击处理程序.

The code first loops over all paragraphs, then grabs the <a> inside and assigns the click handler.

这篇关于如何使用getElementsById或ClassName通过Javascript添加几个“更多"和“更少"按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！