单击按钮时，请删除一类，然后在摘要中的下一个项目中添加类

Question

当用户单击按钮时，我正在尝试创建一个摘要，它将从列表中的一个项目中删除类，然后将类添加到列表中的下一个项目中。

示例：

<button id="next-item">next item</button> //button to advance
<div class="nav-right"> //list of items to rundown
  <div class="irl-today-item current">item 1</div>  //first item
  <div class="irl-today-item">item 2</div>
  <div class="irl-today-item">item 3</div>
  <div class="irl-today-item">item 4</div>
  <div class="irl-today-item">item 5</div>
</div>

我通过将类current添加到下一个项目中，但它不会从上一个项目中删除current。

代码：

$(function(){
$("#next-item").on("click", function(){
   $('.nav-right').removeClass('.current');
   $('.nav-right').find('.current').next().addClass('current');
})

我正在寻找一种前进时从最后一项中删除current的方法。

jsfiddle：https：//jsfiddle.net/openbayou/ya73eovp/

Answer 1

首先，您的删除类方法不起作用。其次，您必须先添加类，然后删除当前元素或将元素输入内存。

检查以下代码。

$(function(){
    $("#next-item").on("click", function(){
       var curr = $('.nav-right').find('.current');
       if(curr.next().length > 0) { // If you want to stop at last element
           curr.next().addClass('current');
           curr.removeClass('current');
       }
    });
});

Answer 2

$(function(){
    $("#next-item").on("click", function(){
      var ari = $('.nav-right .current').index();      
       $('.nav-right').find('.current').removeClass('current');
        ari++;
        $('.nav-right .irl-today-item').eq(ari)
.addClass("current");});
});

.current {border-left:5px solid green}
.irl-today-item {padding:5px 10px}
.next_slide {border-left:5px solid blue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="next-item">next item</button>
<div class="nav-right">
  <div class="irl-today-item current">item 1</div>
  <div class="irl-today-item">item 2</div>
  <div class="irl-today-item">item 3</div>
  <div class="irl-today-item">item 4</div>
  <div class="irl-today-item">item 5</div>
</div>