使用jQuery更改類后，按鈕不響應單擊

Question

我有4-5格，需要在單擊下一步按鈕時隱藏並顯示它們。 因此，我在每次單擊時都會更改按鈕的類別。 但是我的按鈕是第一次響應單擊，后來的課程正在更改，但沒有響應當前課程。

這是我的代碼示例：

$(".next_btn.second").on("click",function(){ alert("second");
        $(".ugc_page.second").addClass("hide");
        $(".ugc_event3.second").addClass("hide");
        $(".ugc_page.third").removeClass("hide");
        $(".next_btn").removeClass("second").addClass("third");
        $(".previous_btn").removeClass("second").addClass("active third");

    });

    $(".next_btn.third").on('click',function() {alert('third');
        $(".ugc_page.third").addClass("hide");
        $(".ugc_page.fourth").removeClass("hide");
        $(".next_btn").removeClass("third").addClass("fourth");
        $(".previous_btn").removeClass("third").addClass("active fourth");
    });

第一次單擊時，它將類更改為第三次，但是僅在單擊警報第二次時。

Answer 1

最好的方法是使用div元素的Index作為隱藏觸發器。

然后在您的JavaScript上聲明var count = 0

下一次的每次Click count 。

 $('#next-button').on("click" function(){ count++; // increment (decrement if its prev-button) $('.DIV_class').fadeOut(0); // hide all class $('.DIV_class').eq(count).fadeIn(0); // will show only the index of that class. }); 

它更易於維護和可讀。

我尚未測試此代碼，但希望它能給您帶來啟發。