Javascript 在锚定链接上加载内容单击

我有默认情况下隐藏的内容。单击按钮时，我希望所选的一个显示其内容。即，如果在第二个

div

上单击“查找更多”，则显示该div的内容

目前的做法：

函数showClass（a）{
var e=[]；
var e=document.getElementsByClassName（a）；
for（e元素）{
如果（！elem）返回true；
如果（elem.style.display==“无”）{
elem.style.display=“块”
}否则{
elem.style.display=“无”
}
}
返回true；
}

.list{
显示：无；
}
a{
光标：指针；
}

清单1
清单2
清单3


清单4
清单5
清单6


清单7
清单8
清单9

了解更多信息

阅读错误信息

未捕获引用错误：未定义getElementsByClassName

您要查找的实际方法是window.document.getElementsByCassName

您有一些问题：

您应该使用（注意

文档

）

要遍历（由

getElementsByClassName

返回）循环，应使用或常规循环。不是迭代集合的推荐方法，因为它需要迭代对象中的属性。因此，

for..in

循环在使用HTMLCollection进行迭代时（当您所追求的是节点时）可能会给出HTMLCollection的意外属性，例如它的

length

函数showClass（a）{
//var e=[]；既然您已经用jQuery标记了这个问题并将其包括在内，那么您应该真正使用它，因为它是非常简单、简洁且可读的代码


函数切换类（类名）{
$（“+className）.toggle（）；
}
.list{
显示：无；
}


示例文本

清单1
清单2
清单3


清单4
清单5
清单6


示例文本

清单7
清单8
清单9

了解更多信息
请查看下面的代码我对您的代码做了一些更改

function showClass(a) {
  var e = [];
  var e = document.getElementsByClassName(a);
  console.log(e);
  for (i=0;i<=e.length;i++) {
    if (!e[i]) return true;
    e[i].classList.add("displayblock");
  }
  return true;
}
function removeClass(a) {
  var e = [];
  var e = document.getElementsByClassName(a);
  console.log(e);
  for (i=0;i<= e.length;i++) {
    if (!e[i]) return true;
    e[i].classList.remove("displayblock");
  }
  return true;
}

HTML



示例文本

清单1
清单2
清单3


清单4
清单5
清单6


示例文本

清单7
清单8
清单9

了解更多
隐藏更多

分享你的改进参考资料
你的html无效-你不能有一个p作为ul的孩子，你声明
e
twice不需要添加
window。document
，只要
document
也可以，在我看来看起来更整洁。你没有写“document”，即“window”这是一个很好的度量啊，进步！但是，是否可以只加载一个
列表
项？因此，如果我有三个
项
div，每个div都有一个``loadMoreBtn
，单击该
loadMoreBtn`，我只想显示该div的内容？我也稍微编辑了我的标记，这反映在quesiton@Freddy对有一种方法可以做到这一点，您可以在我的answer@Freddy不用担心；）
.list {
  display: none;
}
a {
  cursor: pointer;
}
.displayblock{
    display: block;
}

<div>
    <ul class="list">
      <p>sample text</p>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>

  <div>
    <ul class="list">
      <li>list 4</li>
      <li>list 5</li>
      <li>list 6</li>
    </ul>
  </div>

  <div>
    <ul class="list">
      <p>sample text</p>
      <li>list 7</li>
      <li>list 8</li>
      <li>list 9</li>
    </ul>
  </div>


  <a onclick="showClass('list');">Find out more</a>
  <a onclick="removeClass('list');">Hide more</a>