為什么我的 jquery 不起作用？

Question

我的查詢代碼有問題。 我正在創建一個簡單的滑塊，當我創建#prev按鈕功能時它不起作用，但它與我的#next按鈕一起工作，這是為什么？ 當我刪除#prev處理程序時，它通常只能與#next一起#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); });