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

缺少PrincipalServerContext并且已关闭字符串()：

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

和未公开的报价：

$('#next').click(function() {应为<li><a href="#>

Answer 2

这是一个有效的例子：

＆＃13;

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

＆＃13;

#showsecond {
  display: none;
}

＆＃13;

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

＆＃13;

您必须先指定隐藏第二个列表。然后你遇到了一些错误（在点击事件function之后，错过了2个地方的结束语，丢失了（）。此外，您还需要将jquery代码包装在document.ready()或我的代码$(function(){})中，以防止竞争条件。

希望这有帮助！

Answer 3

console.log("Hello World");

http://api.virwox.com/api/json.php?method=getBestPrices&symbols[0]=BTC/SLL

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

7 个答案: