多个任务在一个单一的点击功能

Question

我正试图写一个上一页/下一页滑块，但我有麻烦移动一些类:

当我单击下一步时，我希望活动类从第一个。number子中删除并传递给第二个，然后当我再次单击下一步时，要继续执行相同的过程，我只得到这个向前走了一次，尽管如此，这个过程需要为前一个按钮向后完成，所以，帮助?

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

最后一笔在这里

Answer 1

试试这样:

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

或this:)

  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");
         }
  });
});

Answer 2

您可以将两个按钮函数(next和prev)包装成一个函数:

$(document).ready(function () {
    var one = $('.number').first().addClass('active');
    $('.next,.prev').click(function () {
        var curr = $('button.active');
        if($(this).hasClass('next') )
            curr.next('.number').addClass('active');
        else
            curr.prev('.number').addClass('active');
        curr.removeClass('active');
    });
});

工作演示可以在这里找到。

编辑

添加了一些代码，这样如果没有后面或前面的项，第一个或最后一个项将保持其活动状态

$(document).ready(function () {
    var one = $('.number').first().addClass('active');
    $('.next,.prev').click(function () {
        var curr = $('button.active');
        if($(this).hasClass('next') ) {
            if( curr.next('.number').length > 0 ) {
                curr.next('.number').addClass('active');
                curr.removeClass('active');
            }
        }
        else {
            if( curr.prev('.number').length > 0 ) {
                curr.prev('.number').addClass('active');
                curr.removeClass('active');
            }
        } 
    });
});

还有一个演示

Answer 3

你可以这样做:

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

或者另一个

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

查看这个示例以查看一个工作示例。希望有用!