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

时间:2017-09-14 08:19:11

标签: javascript php jquery

我开始研究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>

7 个答案:

答案 0 :(得分:4)

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

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

和未公开的报价:

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

答案 1 :(得分:4)

这是一个有效的例子:

&#13;
&#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;
&#13;
&#13;

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

希望这有帮助!

答案 2 :(得分:4)

console.log("Hello World");
http://api.virwox.com/api/json.php?method=getBestPrices&symbols[0]=BTC/SLL

答案 3 :(得分:2)

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

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

答案 4 :(得分:2)

三个问题:

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

偶尔查看控制台会很有帮助。

如果您希望最初隐藏第二个列表,请将属性添加到HTML:

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

答案 5 :(得分:2)

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

答案 6 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;