在锚链接上加载内容单击

Question

我有默认情况下隐藏的内容。 单击按钮后，我希望所选的内容显示其内容。 即，如果在第二个div上单击“查找更多”，则显示该div的内容。

到目前为止的方法：

 function showClass(a) { var e = []; var e = document.getElementsByClassName(a); for (elem of e) { if (!elem) return true; if (elem.style.display == "none") { elem.style.display = "block" } else { elem.style.display = "none" } } return true; } 

 .list { display: none; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list"> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> </ul> </div> <div class="list"> <ul> <li>list 4</li> <li>list 5</li> <li>list 6</li> </ul> </div> <div class="list"> <ul> <li>list 7</li> <li>list 8</li> <li>list 9</li> </ul> </div> <a onclick="showClass('list');" class="loadMoreBtn">Find out more</a> 

我要去哪里错了？

Answer 1

您有几个问题：

1. 您应该使用document.getElementsByClassName(a); （注意document ）
2. 要遍历HTMLCollection （由getElementsByClassName返回），应使用.forEach ， for...of或常规的for循环。 for...in是不推荐的迭代集合的方法，因为它是对对象的属性进行迭代的。 因此， for..in循环可以提供HTMLCollection的意外属性，例如使用它进行迭代时的length （而您所需要的只是该节点）

 function showClass(a) { // var e = []; <-- no need for this \\/ redeclared below var e = document.getElementsByClassName(a); for (elem of e) { if (!elem) return true; if (elem.style.display == "none") { elem.style.display = "block" } else { elem.style.display = "none" } } return true; } 

 .list { display: none; } a { cursor: pointer; } 

 <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');" class="loadMoreBtn">Find out more</a> 

要为每个项目/ div具有单独的按钮，可以为每个项目指定一个ID，然后通过将其作为参数传递来切换ID：

 function showClass(id) { var elem = document.getElementById(id); var visible = getComputedStyle(elem).display == "block"; if (!visible) { elem.style.display = "block" } else { elem.style.display = "none" } } 

 .list { display: none; } a { cursor: pointer; } 

 <div> <ul class="list" id="list-one"> <li>list 1</li> <li>list 2</li> <li>list 3</li> </ul> </div> <div> <ul class="list" id="list-two"> <li>list 4</li> <li>list 5</li> <li>list 6</li> </ul> </div> <div> <ul class="list" id="list-three"> <li>list 7</li> <li>list 8</li> <li>list 9</li> </ul> </div> <a onclick="showClass('list-one');" class="loadMoreBtn">Find out more - Item 1</a> <br /> <a onclick="showClass('list-two');" class="loadMoreBtn">Find out more - Item 2</a> <br /> <a onclick="showClass('list-three');" class="loadMoreBtn">Find out more - Item 3</a> 

Answer 2

由于您已经用jQuery标记了问题并包含了它，因此您应该真正使用它，因为它是非常简单，简洁和易读的代码...

 function toggleClass(className) { $("." + className).toggle(); } 

 .list { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <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="toggleClass('list');" class="loadMoreBtn">Find out more</a> 

如您所见，jQuery具有切换可见性的toggle()方法，并且jQuery方法默认情况下对元素数组起作用，因此您不需要循环，也不需要检查任何事物的当前可见状态。

您还可以再进一步一点，用Javascript分配事件处理程序，而不是像这样在anchor元素中内联...

$(".loadMoreBtn").on("click", function() {
    $(".list").toggle();
});

鼓励不要使用HTML编写Javascript，因为这意味着您不必寻找其他文件即可查找它，这对您和任何其他必须查看您的代码的人都非常有用。

Answer 3

请查看以下代码，我对您的代码进行了一些疯狂的更改

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;
}

样式

.list {
  display: none;
}
a {
  cursor: pointer;
}
.displayblock{
    display: block;
}

HTML

<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>

分享您的改进参考

Answer 4

阅读错误消息，

未捕获的ReferenceError：未定义getElementsByClassName

您正在寻找的实际方法是window.document.getElementsByClassName