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

您遇到了一些问题：

您应该使用document.getElementsByClassName(a);（请注意document）
要遍历HTMLCollection（由getElementsByClassName返回），应使用.forEach，for...of或常规for循环。建议不要使用for...in来迭代集合的方法，因为它是对对象的属性进行迭代的。因此，for..in循环可以在使用HTMLCollection进行迭代时提供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分配事件处理程序，而不是像这样在内联元素中内联...

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

鼓励您将Javascript保留为HTML之外的内容，因为这意味着您不必寻找其他文件即可查找它，这对您和任何其他必须查看代码的人都非常有用。

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

在锚链接上加载内容单击

4 个答案: