Question

This question was answered, but I cant stop the loop

我正在尝试创建一个从[1..4]幻灯片开始的简单滑块，其中第4张幻灯片隐藏<Directory "/home/demo/www"> # Allow open access: Require all granted /Directory>。同时它在最后一个滑块上显示一个按钮。我尝试在下面创建它JQuery，但我无法阻止循环。我尝试使用.length == 3删除该类，但循环仍然继续工作并影响其他类。

问题是有一种方法可以创建一个简单的.next（）函数，该函数在第4张幻灯片上结束并隐藏下一个按钮，并在幻灯片的末尾显示按钮。

此外，有没有办法为每张幻灯片创建一个锚点，所以单击它可能会更改每个项目的类。

JQuery的

#next-button

HTML

var items = $('div.item');
var currentItem = items.filter('.active');
  $('#next-button').on('click', function() {
     var nextItem = currentItem.next();
     currentItem.removeClass('active');
      if ( nextItem.length ) {
         currentItem = nextItem.addClass('active');
      } else {
      // If you want it to loop around
      currentItem = items.first().addClass('active');
      }
  });

CSS

<ul class="menu">
    <li><a href="#item_1" class="active_link">go to first item</a></li>
    <li><a href="#item_2">go to second item</a></li>
    <li><a href="#item_3">go to third item</a></li>
    <li><a href="#item_4">go to fourth item</a></li>
</ul>
<div class="wrapper">
   <div class="item active" id="item_1">My first item</div>
   <div class="item" id="item_2">My Second item</div>
   <div class="item" id="item_3">My Third item</div>
   <div class="item" id="item_4">My Fourth item</div>
</div>
<div id="next-button">Go Next</div>
<button type="submit" class="submit-it">Submit</button>

JQuery，如何停止循环并为每个元素添加锚点？

0 个答案: