您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

jQuery toggle() 方法在 jQuery 1.9+ 被移除：遷移到 click 切換邏輯

編輯：程式設計綜合問答

問題原因

.toggle(fn1, fn2, ...) (事件切換版) **在 jQuery 1.9 中被移除**。jQuery 2.1.3 完全不支援。僅保留 .toggle() (顯示/隱藏切換版)。

版本對照

版本	toggle(fn1, fn2...)	toggle() 顯示隱藏
1.0 - 1.8	✅ 支援	✅ 支援
1.9+	❌ 移除 (需 Migrate 插件)	✅ 支援
2.x / 3.x	❌ 不支援	✅ 支援

遷移方案：手動狀態機

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    var state = 0;
    var images = [
        'Image/image01.jpg',
        'Image/image02.jpg', 
        'Image/image03.jpg'
    ];
    
    $('img').on('click', function() {
        state = (state + 1) % images.length;
        $(this).attr('src', images[state]);
        $(this).attr('title', images[state]);
    });
    
    // 初始化 src，否則第一次點擊無圖片可見
    $('img').attr('src', images[0]);
});
</script>
<img />

進階：可複用的 toggleClick 插件

$.fn.toggleClick = function(...handlers) {
    let state = 0;
    return this.on('click', function(e) {
        handlers[state].call(this, e);
        state = (state + 1) % handlers.length;
    });
};

// 使用
$('img').toggleClick(
    function() { $(this).attr('src', 'img1.jpg'); },
    function() { $(this).attr('src', 'img2.jpg'); },
    function() { $(this).attr('src', 'img3.jpg'); }
);

關鍵補充：初始 src 必須設定

原始碼 `` 無 `src` 屬性 → 圖片不顯示 → 使用者無法點擊 → 事件永不觸發。**必須預設一張圖片** 或用 CSS 給可見區域。

其他被移除的 jQuery 1.9+ API

若必須用舊代碼：jQuery Migrate

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js"></script>
<!-- 會在 console 輸出警告，僅作過渡用 -->