javascript - 如何根据列表中是否有其他项目显示按钮？

Question

我在为我的代码寻找解决方案时遇到问题。 I asked for help on how to continue click on a list if there's another list inside the list and how to switch between those lists我已经让它工作了，但我遇到的问题是第二个列表是最后一个项目还是那里。

基本上，它看起来像这样:

<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<button id="hide" class="button">Hide</button>
<ul class="multi-items">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items">
<ul class="pagnation-2">
   <li>3a</li>
   <li>3b</li>
   <li>3c</li>
</ul></li>
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>

我的设置方式是按钮从 .multi-items 切换到至 .pagnation-2 ，当它到达该列表的末尾时，它不会返回到 .multi-items继续列表。

检查第二个列表 ( .pagnation-2 ) 是最后一项(即 <li> 之后没有 .pagnation-2 )还是第一个列表是否继续(即 <li> 之后)的最佳方法是什么.pagnation-2 )?

这是我的问题的一个工作示例:

$('#multi-single-next').click(function() {
  let $item;

  if(!$('ul.multi-items li.single-data-item.active').length) {
      $item = $('ul.multi-items li.single-data-item').first();
  }
  else {
      $prev = $('ul.multi-items li.single-data-item.active');
      $item = $prev.next();

      if(!$prev.next().length) {
          $prev.removeClass('active');
          $prev.delay(1).fadeOut(300);
          return;
      }

      $prev.removeClass('active');
      $prev.delay(1).fadeOut(300);
  }

  $item.addClass('active');
  $item.delay(300).fadeIn(450);
  
  // sub items
  $('ul.pagnation-2 li').removeClass('active');
  if($item.hasClass('has-multi-items')) {
      const $sub = $item.find('ul li').first();
      $sub.addClass('active');
      $sub.delay(200).fadeIn(250);
      $('#multi-single-next').css('display','none');
      $('#multi-next-multi-item').css('display','block');
      }
});


$('#multi-next-multi-item').click(function() {
  const $item = $('ul.pagnation-2 li.active');
  const $next = $item.next();

  $item.removeClass('active');
  $item.hide();

  $next.addClass('active');
  $next.show();
});

.multi-items li {
    display: inline-block;
    list-style: none;
  }
  .multi-items li:not(:first-child) {
    display: none;
  }
  #multi-next-multi-item {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="multi-items">
<li class="single-data-item active"></li>
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
</ul></li>
<li class="single-data-item"><div class="data-item">3</div></li>
<li class="single-data-item"><div class="data-item">4</div></li>
</ul>

Answer 1

您可以检查下一个 li 的 length 是否存在。

解决方案

$('#multi-next-multi-item').click(function() {
  const $item = $('ul.pagnation-2 li.active');
  const $next = $item.next();

  //Check if last item
  const $lastItem = $('ul.pagnation-2 li.active').next().length;

  $item.removeClass('active');
  $item.hide();

  if($lastItem == 0){

      //Get the parent
      const $li_parent = $item.parent().parent();

      const $single_next = $li_parent.next();

      $li_parent.removeClass('active');
      $li_parent.hide();

      $single_next.addClass('active');
      $single_next.show();
      $('#multi-single-next').css('display','block');
      $('#multi-next-multi-item').css('display','none');
  }else{
      $next.addClass('active');
      $next.show();
  }

});