Jquery 在一次单击功能中执行多个任务

我正在尝试编写上一页/下一页滑块，但在移动周围的某些类时遇到问题：

当我单击“下一步”时，我希望将活动类从第一个.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>

还有jquery

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

    });
});

---

最后是一支笔

试试这样的东西：

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

对于prev按钮，您需要将下一个方法调用更改为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");
         }
  });
});

---

您可以将“下一个”和“上一个”按钮功能包装为一个功能：

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

---

.

您可以这样做：

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

选中此项查看工作示例。

---

希望它有用

工作起来很有魅力，但问题是它会将class.active添加到下一个和上一个buttons@Miguel看看添加的代码，我修复了这个小问题，同时删除了.active类：像魔咒一样的剑术！荣誉@Benjamin，在文档过滤器中，将匹配的元素集减少到与选择器匹配或通过函数测试的元素集。此活动甚至适用于下一个和上一个按钮

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