jQuery toggle() 切換函數報錯：傳遞 jQuery 物件給原生 DOM 方法的錯誤

問題現象

使用 jQuery .toggle(fn1, fn2) 為元素綁定切換點擊事件，並在回調中呼叫自訂動畫函式 changeManyElem()，但動畫異常或報錯。

錯誤程式碼分析

$(function() {
    var sideRight = $('#sideright');  // jQuery 物件
    $('.side-icon').each(function(index){
        $(this).toggle(function(){
            changeManyElem(sideRight, {'right':0}, 30);  // 傳遞 jQuery 物件
        }, function(){
            changeManyElem(sideRight, {'right':-350}, 30);
        });
    });
});

function getStyle(obj, attr) {
    if (obj.currentStyle) {  // obj 是 jQuery 物件，無 currentStyle
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];  // obj 非 DOM 元素
    }
}

function changeManyElem(obj, json, spd, fn) {
    // 內部使用 obj.style[attr] = ...  // jQuery 物件無 style 屬性
    // 以及 obj.currentStyle / getComputedStyle(obj)
}

核心錯誤

sideRight 是 jQuery 物件（陣列類似物件），而 getStyle() 和 changeManyElem() 期望接收原生 DOM 元素。 jQuery 物件沒有 style、currentStyle 等 DOM 屬性，導致樣式讀寫失敗。

解決方案

方法一：取得原生 DOM 元素（推薦）

使用 [0] 或 .get(0) 從 jQuery 物件提取原生元素：

$(function() {
    var sideRight = $('#sideright')[0];  // 直接取得 DOM 元素
    // 或 var sideRight = document.getElementById('sideright');

    $('.side-icon').each(function(){
        $(this).toggle(function(){
            changeManyElem(sideRight, {'right':0}, 30);
        }, function(){
            changeManyElem(sideRight, {'right':-350}, 30);
        });
    });
});

方法二：在函式內部轉換

若不想改變呼叫處，修改 changeManyElem 內部自動處理：

function changeManyElem(obj, json, spd, fn) {
    // 兼容 jQuery 物件與 DOM 元素
    var dom = obj instanceof jQuery ? obj[0] : obj;
    // 後續使用 dom.style, dom.currentStyle 等
}

方法三：全面改用 jQuery 動畫 API

拋棄原生樣式操作，改用 .animate()，程式碼更簡潔且跨瀏覽器：

$('.side-icon').click(function() {
    var $right = $('#sideright');
    var isOpen = $right.data('open') || false;
    $right.animate({ right: isOpen ? -350 : 0 }, 300);
    $right.data('open', !isOpen);
});

補充說明：.toggle(fn, fn) 已移除

jQuery 1.9 起移除了 .toggle(handler1, handler2) 簽名（僅保留 .toggle() 顯示/隱藏）。若專案使用新版 jQuery，請改用 .click() 內部切換邏輯或 .on('click', ...)。

關鍵概念

• jQuery 物件 vs DOM 元素：$('selector') 返回 jQuery 物件（包裝集），需用 [index] 或 .get(index) 取得原生 HTMLElement。
• 樣式操作：原生 element.style.property、getComputedStyle() 僅適用於 DOM 元素；jQuery 提供 .css() 統一介面。
• API 版本差異：查閱對應版本文檔，避免使用已棄用/移除的方法。