Question

$(function(){
    $("#list li").slice(0, 1).show(); 
    $("#load").click(function(e){
        e.preventDefault();
        $("#list li:hidden").slice(0, 3).show(); 
    });
});

ul{background:pink; width:80%; height:auto; padding:2%; list-style-type:none;}

li{background:red; width:100%; margin:1%; color:white}

#load{color:white; background:red; text-decoration:none; margin:0% 0% 0% 40%; padding:1%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id=”list”>item 1</li>
<li id=”list”>item  2</li>
<li id=”list”>item 3 </li>
<li id=”list”>item  4</li>
<li id=”list”>item 5 </li>
<li id=”list”>item  6</li>
<li id=”list”>item  7</li>
<li id=”list”>item  8</li>
<li id=”list”>item  9</li>
<li id=”list”>item  10</li>
</ul>

<a href="#" id="load">Load More</a>

我正在尝试创建一个列表，当用户单击按钮时，该列表会加载其他项目。上面的Jquery代码针对“ #list li”，但是由于某些原因，当我单击按钮时它不起作用。

我在这里做错了什么？

Answer 1

所有项目都没有被隐藏（尽管我认为这是问题的产物，而不是您的真实代码）。
重复的ID是无效的HTML； jQuery将只能访问具有给定ID的第一个元素。
#list li将选择一个列表项，该列表项是#list的子项，但在您的情况下，它是相同的元素（因此应该是li#list）。

以下是更正的版本，使用类而不是ID：

$(function(){
    $("li.list").slice(0, 1).show(); 
    $("#load").click(function(e){
        e.preventDefault();
        $("li.list:hidden").slice(0, 3).show(); 
    });
});

ul{background:pink; width:80%; height:auto; padding:2%; list-style-type:none;}

li{background:red; width:100%; margin:1%; color:white; display:none}

#load{color:white; background:red; text-decoration:none; margin:0% 0% 0% 40%; padding:1%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="list">item 1</li>
  <li class="list">item 2</li>
  <li class="list">item 3</li>
  <li class="list">item 4</li>
  <li class="list">item 5</li>
  <li class="list">item 6</li>
  <li class="list">item 7</li>
  <li class="list">item 8</li>
  <li class="list">item 9</li>
  <li class="list">item 10</li>
</ul>

<a href="#" id="load">Load More</a>

按下按钮时无法加载更多内容

1 个答案: