javascript - 使用 javascript 显示列表项

Question

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

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

Answer 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。在这种情况下，您可以创建一个通用方法并在其上传入元素。