多内容阅读更多/更少按钮-Javascript

我正试图使用这个javascript解决方案在我的推荐信中添加“多读/少读”按钮。问题是它只适用于一个按钮，而不是希望的多个按钮。如何使此代码适用于多个按钮而不是单个按钮

函数myFunction（）{
var dots=document.getElementById（“dots”）；
var moreText=document.getElementById（“更多”）；
var btnText=document.getElementById（“myBtn”）；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

#更多{显示：无；}

多读少读按钮
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门

阅读更多
多读少读按钮
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门

阅读更多

如注释

中所述，id的

必须是唯一的，属于同一类型。没办法。如果有多个，则只有DOM中的第一个可用。所以用类来代替。并学习如何在JavaScript中定位

event.target

。这将使一切变得容易

  var dots = event.target.previousElementSibling.querySelector(".dots");
  var moreText = event.target.previousElementSibling.querySelector(".more");
  var btnText = event.target;

请在此阅读如何瞄准目标

捕捉到以事件为元素的单击按钮后，只需从中导航到其他元素。您可以使用其他方法获取上一个

p

，然后在其中获取想要的类

函数myFunction（事件）{
var dots=event.target.previousElementSibling.querySelector（“.dots”）；
var moreText=event.target.previousElementSibling.querySelector（“.more”）；
var btnText=event.target；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

。更多{
显示：无；
}

多读少读按钮
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门

阅读更多
多读少读按钮
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门

阅读更多

使用VanillaJS，您可以使用以下内容：

document.addEventListener（'DOMContentLoaded'，（）=>{
document.querySelectorAll（“.lessButton”）.forEach（元素=>{
element.onclick=（）=>{
//你的行动
}
});
document.querySelectorAll（“.moreButton”）.forEach（元素=>{
element.onclick=（）=>{
//你的行动
}
});
});这是因为您使用的系统具有
id
属性。但ID必须是唯一的，才能工作。改用类。当点击按钮时，查找与点击按钮相关的
more
元素并切换该元素。我一直收到以下错误：
uncaughttypeerror:HTMLButtonElement.onclick（（index）：560）的myFunction（（index）：1582）处无法读取null属性“style”
@PhilipCron仔细看看我所做的所有更改。。。你面前有一个有效的解决方案。你把所有的HTML ID都改成了类吗？是的，我改了，我把所有的HTML ID都改成了类，并添加了你的JavaScript。出于某种原因，每次按钮尝试触发时，我都会收到错误代码。HTML标记共谋与您发布的代码相同吗？这必须是为了让它起作用。它必须是
event.target.previousElementSibling.querySelector（“.more”）它必须是段落后面的按钮，并且需要有更多的和dots类。如果没有，您需要正确地定位它们@PhilipCronAnywhere您的错误意味着您没有正确获取元素