使用 javascript 显示列表项答案

【问题标题】：Reveal list items using javascript使用 javascript 显示列表项
【发布时间】：2019-10-02 13:29:45
【问题描述】：

我需要一个列表来打开和显示更多项目，我使用的代码是

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        $('#loadMore').hide();
        $('#showLess').show();
        $('#myList li:gt(3)').show();
    });
    $('#showLess').click(function () {
       $('#loadMore').show();
       $('#showLess').hide();
       $('#myList li:gt(3)').hide();
    });
});

哪个对一个列表很好，我如何为 4 个列表创建代码，我需要创建 4 个函数吗？

如你所知，我是 javascript 的初学者。

这是我得到想法和代码的原始帖子

Reveal All list items - using jQuery

myList li{ display:none;}
#loadMore {
    color:grey;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:grey;
    cursor:pointer;
    display:none;
}
#showLess:hover {
    color:black;
}

#loadMore, #showLess {
  text-align: center;
  margin-top: 20px;
}

  <ul id="myList" class="product-list">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>  
  </ul>

        <div id="loadMore">Show More</div>
        <div id="showLess">Show Less</div>

【问题讨论】：

不需要有4个函数，你可以在点击时调用相同的函数并将listId传递给它（点击发生的地方），现在找出那个列表，因为你知道ID并显示详细信息.这种情况下，需要有不同的ID来区分，哪个loadMore被点击了
感谢您的评论，我正在考虑这条路线，但我不知道应该如何写。我是否需要更改 #myList 并在该函数中创建 4 个 ID？

标签： javascript jquery html css function

【解决方案1】：

你也不能使用 id 。您只能使用类名。如果你只使用类名，那么代码看起来会像这样，

$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$.each($('.product-list'),function(i,e) { $(e).find('li:gt(2)').hide(); });
$('#loadMore').click(function () {
    $('#loadMore').hide();
    $('#showLess').show();
    $.each($('.product-list'),function(i,e) { $(e).find('li:gt(2)').show(); });
});
$('#showLess').click(function () {
   $('#loadMore').show();
   $('#showLess').hide();
   $.each($('.product-list'),function(i,e) { $(e).find('li:gt(2)').hide(); });
});});

https://jsfiddle.net/kjxr95hL/2/

如果类名不是一个选项，那么您需要使用 id。在这种情况下，您可以创建一个通用方法并在其上传递元素。

【讨论】：