javascript中具有相同类名的元素

我不熟悉javascript，因为我跳过了它，跳转到jquery，现在我正在编写javascript代码，但我遇到了麻烦。我有多个具有相同类名的元素，每个元素下面都有一个a标记。我想在单击元素下方的按钮时隐藏/显示该元素。如何在javascript中实现这一点？（请不要用jquery）。

HTML

Javascript

  var status = "less";
  function toggleText1() {
    if (status == "less") {
      document.getElementsByClassName("content")[0].style.display = 'block';
      document.getElementsByClassName("show-more")[0].innerText = "See Less";
      status1 = "more";
    } else if (status1 == "more") {
      document.getElementsByClassName("content")[0].style.display = 'none';
      document.getElementsByClassName("show-more")[0].innerText = "See More";
      status1 = "less";
    }   
  }

---

在我的原始代码中，我将我的内容命名为content1，content2，将我的a标签命名为show-more1，show-more2，然后将我的函数命名为toggleText1，toggleText2等等。它能工作，但我发现它效率低下。你们能帮我找到正确的路吗？

这里有一个解决方法。捕获所有链接，然后使用

Array 35; forEach

对其进行迭代，并将

单击

事件绑定到每个元素。然后在父节点中找到

div

元素，并将其类从隐藏切换到可见

ES6解决方案

var elems=document.getElementsByClassName（“显示更多”）；
Array.from（elems）.forEach（v=>v.addEventListener（'click'，function（））{
this.parentElement.getElementsByClassName（'content'）[0].classList.toggle（'hidden'）；
}));
。隐藏{
显示：无；
}

内容1
内容2
内容3
首先，您可以使用this作为参数/参数在onclick中传递元素，以了解onclick的来源。然后获得父级并获得正确的contentdiv，使用style元素并对显示或隐藏的内容执行一些逻辑操作

根据你的帖子，你也应该在默认情况下隐藏你的内容div


功能切换文本（aTag）{
var content=aTag.parentNode.getElementsByClassName（“内容”）[0]；
if（content.style.display==null | | content.style.display==none）
{
content.style.display='block'；
aTag.innerText=“查看较少”；
}
其他的
{
content.style.display='none'；
aTag.innerText=“查看更多”；
}
}

内容1
内容2
内容3

var hidePrev=函数（事件）{
元素=event.target；
元素.previousSibling.previousSibling.classList.toggle（'hidden'）；
};
。隐藏{
显示：无；
}

内容1
内容2
内容3
您还可以使用委托事件侦听器，它是分配给公共祖先元素的事件侦听器

检查元素是否为我们要查找的元素类型（此检查可能会根据页面的实际内容进行更改），然后选择上一个元素同级，并根据当前值更改显示属性和文本

本例使用了一个fat arrow函数（在ECMAScript 2015语言规范中引入），但如果需要支持旧浏览器，则普通函数表达式就足够了


document.addEventListener（'click'，event=>{
常量元素=event.target
if（event.target.classList.contains（“切换”））{
const previous=event.target.previousElement同级
const text=element.textContent
element.textContent=element.dataset.toggleText | |“显示较少”
element.dataset.toggleText=文本
previous.classList.toggle（'hidden'）
}
})
。隐藏{
显示：无；
}

内容1
内容2
内容3
疯狂，CSS只回答-仅用于娱乐和教育目的

这确实有一些实际应用，您可以通过向url添加哈希来预先打开一个内容区域。例如


.content.show less{
显示：块；
}
.内容{
显示：无；
}
#内容容器。内容：目标{
显示：块；
}
#内容容器。内容：target~。显示更多信息{
显示：无；
}

内容1
内容2
内容3
应该注意，这需要使用es6+，事实上确实如此。然而，并不是所有使用javascript的人都使用它。我指出这一点是因为OP在他的代码中没有使用任何es6+语法。现在应该使用它了，但它仍然没有在所有浏览器中得到100%的支持。我只是想向OP指出一些事情，让他/她明白，这对他们来说可能不是开箱即用的。这并不是对你的答案的冒犯，但它还没有消亡，IE11的全球使用率仍然是3.6%，超过了Edge，所以这并不是一个微不足道的用户数量。(). 就个人而言，我会提供你的现代版本和“经典”版本，这样OP可以决定他想要支持什么。@Kinduser我喜欢使用这个。因此，我更喜欢您的es5解决方案，因为它对我来说更清晰。一直想从jquery中使用$（这个），只是不知道如何在javascript中使用它。谢谢。我正在为易趣重新设计一个页面，因为易趣在其iframe中不太支持jquery，所以我尝试通过javscript实现一些功能。谢谢css中的好概念。我唯一的问题是每次都必须更改元素id。
.content {
 display: none;
}

  var status = "less";
  function toggleText1() {
    if (status == "less") {
      document.getElementsByClassName("content")[0].style.display = 'block';
      document.getElementsByClassName("show-more")[0].innerText = "See Less";
      status1 = "more";
    } else if (status1 == "more") {
      document.getElementsByClassName("content")[0].style.display = 'none';
      document.getElementsByClassName("show-more")[0].innerText = "See More";
      status1 = "less";
    }   
  }