jquery - 单击功能中的多个任务

Question

我正在尝试编写上一页/下一页 slider ，但我无法移动一些类:

当我单击下一步时，我希望从第一个 .number 子级中删除事件类并传递给第二个，然后当我再次单击下一步时继续相同的过程，我只得到这个继续有一次，尽管如此，这个过程需要为 Prev 按钮向后完成，所以，帮助？

html

<div id="container">
     <button class="prev styledbtn">Prev</button>
     <button class="styledbtn number">1</button>
     <button class="styledbtn number">2</button>
     <button class="styledbtn number">3</button>
     <button class="styledbtn number">4</button>
     <button class="styledbtn number">5</button>
     <button class="next styledbtn">Next</button>
</div>

CSS

body{
background:lavender;
}

#container{

width:300px;
height:100px;
background: whitesmoke;

}

.styledbtn{
outline:none;
border: 1px solid teal;
background:steelblue;
color: snow;
padding: 10px;
margin-right:-5px;

-webkit-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
}

.styledbtn:hover{
background:skyblue;
}

.active{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:2px solid midnightblue;
}

和 jquery

$(document).ready(function () {
    var one = $('.number').first().addClass('active');
    $('.next').click(function () {
        one.removeClass('active').next().addClass('active');
    });
    $('.prev').click(function () {

    });
});

终于来笔了here

Answer 1

尝试这样的事情:

  var numbers = $('.number');
  var one = numbers.first().addClass('active');

  $('.next').click(function(){
    numbers.filter(".active").removeClass("active").next().addClass("active");
  });

或者这个 :)

  var numbers = $('.number');
  var one = numbers.first().addClass('active');
      $('.next').click(function(){
         var currentActive = numbers.filter(".active");
         var nextNumber = currentActive.next();
         if(nextNumber.hasClass("number")){          
             currentActive.removeClass("active");
             nextNumber.addClass("active");
         } 
 });

对于上一个按钮，您需要将 next() 方法调用更改为 prev()。

更新

完整脚本

$(document).ready(function(){

  var numbers = $('.number');
  var one = numbers.first().addClass('active');

  $('.next').click(function(){
         var currentActive = numbers.filter(".active");
         var nextNumber = currentActive.next();
         if(nextNumber.hasClass("number")){          
             currentActive.removeClass("active");
             nextNumber.addClass("active");
         }
  }); 

  $(".prev").click(function(){
         var currentActive = numbers.filter(".active");
         var prevNumber = currentActive.prev();
         if(prevNumber.hasClass("number")){          
             currentActive.removeClass("active");
             prevNumber.addClass("active");
         }
  });
});