删除一个类，然后在单击按钮时将其添加到摘要中的下一个项目中 [英] Remove a class and then add a class to the next item in a rundown when clicking a button

问题描述

当用户单击按钮时，我试图创建一个概要，它从列表中的一个项目中删除一个类，然后将该类添加到列表中的下一个项目.

I'm trying to create a rundown when a user clicks on a button, it removes a class from one item in the list and then add the class to the next item in the list.

示例:

<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.

I got it working by adding the class current to the next item but it doesn't remove current from the previous item.

代码:

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

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

I'm looking for a way to remove current from the last item when advancing.

JSfiddle: https://jsfiddle.net/openbayou/ya73eovp/

JSfiddle: https://jsfiddle.net/openbayou/ya73eovp/

推荐答案

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

First, Your remove class method is not working. Second, You have to add the class first and then remove the current element or get the element into memory.

检查以下代码.

$(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');
       }
    });
});

这篇关于删除一个类，然后在单击按钮时将其添加到摘要中的下一个项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！