javascript - 在 anchor 链接上加载内容点击

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); (注意文档)
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>