多内容阅读更多/更少按钮 - Javascript
[英]Read more/less button for multiple content - Javascript
问题描述
I am trying to use this javascript solution to add read more/less buttons to my testimonials.
我正在尝试使用此 javascript 解决方案将阅读更多/更少按钮添加到我的推荐中。 The problem is it only works for one button and not multiple as hoped.问题是它只适用于一个按钮，而不是像希望的那样多个。 How can I make this code work for multiple buttons and not a single button?如何使此代码适用于多个按钮而不是单个按钮？
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"; } }
#more {display: none;}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Read More Read Less Button</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()" id="myBtn">Read more</button> <h2>Read More Read Less Button</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()" id="myBtn">Read more</button> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2020-10-24 00:13:37
As mentioned in comment id's needs to be unique, one of the kind.正如评论中提到的， id's需要是唯一的，其中之一。 No way around that.没办法。 If you have multiple, only the first one in DOM will work.如果您有多个，则只有 DOM 中的第一个可以工作。 So use classes instead.所以改用类。 And learn how to target event.target in JavaScript.并学习如何在 JavaScript 中定位event.target 。 It will make everything easy.这将使一切变得容易。
var dots = event.target.previousElementSibling.querySelector(".dots");
var moreText = event.target.previousElementSibling.querySelector(".more");
var btnText = event.target;
Please read here how to target elements with events请在此处阅读如何使用事件定位元素
After you catch the clicked button with event as element, you just need to navigate to other elements from it.在您以事件为元素捕获单击的按钮后，您只需要从中导航到其他元素。 You can use among other things previousSibling to get previous p and then querySelector to get wanted class inside it.您可以使用previousSibling获取前一个p ，然后使用querySelector获取其中的所需类。
function myFunction(event) { var dots = event.target.previousElementSibling.querySelector(".dots"); var moreText = event.target.previousElementSibling.querySelector(".more"); var btnText = event.target; 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"; } }
.more { display: none; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Read More Read Less Button</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">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(event)" class="myBtn">Read more</button> <h2>Read More Read Less Button</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">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(event)" class="myBtn">Read more</button> </body> </html>
解决方案2
-1 2020-10-24 01:53:10
Using VanillaJS you can use something like this:使用 VanillaJS，您可以使用以下内容：
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll(".lessButton"). forEach(element => { element.onclick = () => { //Your action here } }); document.querySelectorAll(".moreButton"). forEach(element => { element.onclick = () => { //Your action here } }); });
You can access element's attributes like ID and any data property you add to each button.您可以访问元素的属性，例如 ID 和添加到每个按钮的任何数据属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.