将内容加载到锚点链接上

Freddy 发表于 Dev

弗雷迪

我有默认情况下隐藏的内容。单击按钮时，我希望所选的内容显示其内容。即，如果在第二个菜单上单击“查找更多” 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>

我要去哪里错了？

尼克·帕森斯

您有几个问题：

您应该使用document.getElementsByClassName(a);（注意document）
要通过迭代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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。