如何使用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

缺少()并且没有关闭字符串'#next' ：

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

和未公开的报价：

<li><a href="#>应为<li><a href="#"

Answer 2

这是一个工作示例：

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

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

希望这可以帮助！

Answer 3

  $('#showsecond').hide(); $("#next").click(function(){ $("#next").closest('li').remove(); var listItems = $("#showsecond li"); listItems.each(function(idx, li) { var product = $(li); $('#showfirst').append(product); }); }); 

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

Answer 4

你必须检查你是否关闭了你的字符串。 有一些未终止的字符串。

  $('#next').click(function(){ $('#showfirst').hide(); $('#showsecond').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <h1>Links</h1> <ul id="showfirst"> <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" style="display:none;"> <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> 

Answer 5

三个问题：

• 一个href="#属性缺少结束双引号
• 函数表达式缺少括号。 应该是function () {
• 选择器$('#next)缺少结束语。

偶尔看一下控制台很有帮助。

如果您希望最初隐藏第二个列表，则向HTML添加一个属性：

<ul id="showsecond" style="display:none">

Answer 6

 $('#showsecond').hide(); $('#next').click(function(){ $('#showsecond').show(); }); 

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

Answer 7

var listItems = $("#showsecond li"); 此语句将检索所有li标签元素，然后我们跟踪这些元素，并使用append()函数将每个元素附加到第一个列表中。 $('#showfirst').append(product);

  $('#showsecond').hide(); $("#next").click(function(){ var listItems = $("#showsecond li"); listItems.each(function(idx, li) { var product = $(li); $('#showfirst').append(product); }); }); 

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