Question

我的查询代码有问题。我正在创建一个简单的滑块，当我创建#prev按钮功能时，它不起作用，但它与我的#next按钮一起工作，为什么会这样？当我删除#prev处理程序时，它只能与#next一起正常工作。这是代码：

$(document).ready(function () {
    // set options 
    var speed = 500;
    var autoswitch = true;
    var autoswitch_speed = 4000;

    $('.slide').first().addClass('active'); // add the initial active class
    $('.slide').hide(); // hide all slides 
    $('.active').show(); // show first slide

    // when the next/prev button clicked
    $('#next').on('click', function () {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':last-child')) {
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        };

        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

        $('#prev').on('click', function () {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':last-child')) {
                $('.slide').first().addClass('active');
            } else {
                $('.oldActive').next().addClass('active');
            };

            $('.oldActive').removeClass('oldActive');
            $('.slide').fadeOut(speed);
            $('.active').fadeIn(speed);
        });
    });

Answer 1

您已在.next按钮点击事件

上插入.prev按钮点击事件

$(document).ready(function () {
    // set options 
    var speed = 500;
    var autoswitch = true;
    var autoswitch_speed = 4000;

    // add the initial active class
    $('.slide').first().addClass('active');

    // hide all slides 
    $('.slide').hide();

    // show first slide
    $('.active').show();

    // when the next/prev button clicked
    $('#next').on('click', function () {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':last-child')) {
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        };

        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);
    });

  $('#prev').on('click', function () {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.slide').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    };

    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
  });

为什么我的jquery不起作用？

1 个答案: