Question

我正在尝试编写上一页/下一页滑块，但我无法移动某些类：

当我点击下一步时，我希望从第一个.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");
         }
  });
});

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

工作演示can be found here。

修改

添加了一些代码，以便如果下一个或上一个没有项目，则第一个或最后一个项目将保持其活动状态

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

Also with a demo

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

选中此jsfiddle以查看有效示例。希望它有用！

单击功能中的多个任务

3 个答案: