javascript - 如何使用 jQuery 从另一个 onclick 更改 ul 列表项？

Question

我开始学习 jQuery。

当我单击“显示更多链接”时，我试图在第一个项目列表所在的位置显示第二个项目列表，但我没有成功。

有人可以帮忙吗？

      <ul id="showfirst">
         <h1>Links</h1>
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="# id="next">show more links </a></li>
      </ul>

      <ul id="showsecond">
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
         <li><a href="#">Link 7</a></li>
         <li><a href="#">Link 8</a></li>
         <li><a href="#">+ links</a></li>
      </ul>

   </section>

JavaScript:

<script type="text/javascript">
    $('#next).click(function{

    $('#showsecond').show();

});
</script>

Answer 1

这是一个工作示例:

$(function() {
  $('#next').click(function() {

    $('#showsecond').show();

  });
});

#showsecond {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
  <h1>Links</h1>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li>
    <a href="#" id="next">show more links </a> </li>
</ul>

<ul id="showsecond">
  <li><a href="# ">Link 5</a></li>
  <li><a href="# ">Link 6</a></li>
  <li><a href="# ">Link 7</a></li>
  <li><a href="# ">Link 8</a></li>
  <li><a href="# ">+ links</a></li>
</ul>

您必须首先指定隐藏第二个列表。然后你遇到了一些错误(在 2 个位置缺少结束引号，在点击事件的 function 之后缺少 ())。而且您还需要将 jquery 代码包装在 document.ready() 或我的代码 $(function(){}) 中，以防止竞争条件。

希望这有帮助!