代码之家 › 专栏 › 技术社区 › Gregory Schultz

删除一个类,然后在单击按钮时将类添加到明细表中的下一个项中

jquery

Gregory Schultz · 技术社区 · 7 年前

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

<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 现在的

代码:

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

现在的 从最后一个项目前进。

JS标题: https://jsfiddle.net/openbayou/ya73eovp/

1 回复 | 直到 7 年前

Tamilvanan 7 年前

首先,remove类方法不起作用。

检查以下代码。

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

Arindam Sarkar 7 年前

$(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>