显示更多/显示更少的多个列表不起作用

Question

我一直在尝试创建显示更多和显示更少按钮的列表。我的代码适用于单个“ul”列表。但是当我创建多个列表时，列表项没有显示。仅显示按钮。

你能告诉我如何使用显示更多/显示更少按钮为多个“ul”列表编写脚本。

此外，我必须对所有列表和按钮使用相同的 id 和 class

提前致谢..

    //html
        <div class="wrapper">
        <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        </ul> 
        <button id="next">+ Show More</button>
        <button id="less">- Show Less</button>
    </div>
        
        <div class="wrapper">
        <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        </ul> 
        <button id="next">+ Show More</button>
        <button id="less">- Show Less</button>
    </div>
        
        <div class="wrapper">
        <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        </ul> 
        <button id="next">+ Show More</button>
        <button id="less">- Show Less</button>
    </div>

//more list...
        
        //Script
        
        $(document).ready(function(){
        
              var list = $(".list li");
              var numToShow = 3;
              var button = $("#next");
              var link = $('#less');
              var numInList = list.length;
              list.hide();
              if (numInList > numToShow) {
                button.show();
                link.hide();
              }
              list.slice(0, numToShow).show();
        
              button.click(function(){
                  var showing = list.filter(':visible').length;
                  list.slice(showing - 1, showing + numToShow).fadeIn();
                  var nowShowing = list.filter(':visible').length;
                  if (nowShowing >= numInList) {
                    button.hide();
                    link.show();
        
                  }
              });
              link.click(function () {
                $('.list li').not(':lt(3)').hide();
                button.show();
                link.hide();
            });
        
        });
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 1

更新您的代码以使用类、siblings()、children() 和 next()

$(document).ready(function(){
        
        var numToShow = 3;
        $(".list li").hide();
        $('.wrapper ul').each(function(){
           var list = $(this).children("li");
           var button = $(this).siblings(".next");
           var less = $(this).siblings('.less');
           var numInList = list.length;
           if (numInList > numToShow) {
              button.show();
              less.hide();
           }
          //$(this).children("li:lt('+ numToShow +')").show();
          list.slice(0, numToShow).show();
        });
        
        $('button.next').click(function(){
          var list = $(this).siblings(".list").children("li");
          var numInList = list.length;
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            $(this).hide();
            $(this).next('button.less').show();
          }
        });

        $('button.less').click(function () {
          $(this).siblings(".list").children("li").not(':lt(3)').hide();
          $(this).siblings('button.next').show();
          $(this).hide();
        });
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
    </ul>
    <button id="next" class="next">+ Show More</button>
    <button id="less" class="less">- Show Less</button>
  </div>

  <div class="wrapper">
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
    </ul>
    <button id="next" class="next">+ Show More</button>
    <button id="less" class="less">- Show Less</button>
  </div>

  <div class="wrapper">
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
    </ul>
    <button id="next" class="next">+ Show More</button>
    <button id="less" class="less">- Show Less</button>
  </div>