如何調用自定義jQuery函數

-3

我對jQuery相對較新，我試圖創建一個自定義jQuery函數。該功能將旋轉圖像。夠簡單！以下是我正在調用該函數的那一刻：如何調用自定義jQuery函數

function rotate(degree) { 
    $(this).css({ 
     "transform": "rotate(" + degree + "deg)", 
     "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */ 
     "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */ 
     "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */ 
     "-o-transform": "rotate(" + degree + "deg)" /* Opera */ 
    }); 
}

我想這樣調用上面的函數：

$(".object").rotate(8);

我將如何改變上述功能這樣的工作？

來源

2012-12-09 Oliver Tappin

什麼問題？ –

而你的問題是......什麼？因爲它代表着你的代碼看起來不合法 - 你在一個對象上調用一個函數，但該函數不是該對象的「類型」的「成員」。我認爲你應該對擴展jQuery對象做一些研究。 –

問題出在標題 –

沒有必要使用each()。 jQuery css()函數適用於整個集合，就像幾乎所有的jQuery函數一樣。

下面是（至少接近）最佳實踐，業界公認的創建新jQuery插件的方法。你的代碼不工作的原因是因爲你所做的只是聲明一個全局函數。爲了讓jQuery對象有權訪問該函數，必須將該函數添加到jQuery對象本身，以便它可以與該對象的實例正確配對，從而使this可以訪問當前的jQuery集。這如下完成。函數中有趣的東西包裝一切都是由於各種原因，你可以在網上閱讀大多數jQuery插件教程。請注意，在jQuery函數內部，不需要執行$(this)，因爲this已經引用了jQuery匹配集。

(function($, window, undefined) { 
    $.fn.rotate = function(degree) { 
     return this.css({ 
     "transform": "rotate(" + degree + "deg)", 
     "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */ 
     "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */ 
     "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */ 
     "-o-transform": "rotate(" + degree + "deg)" /* Opera */ 
     }); 
    }; 
    $.fn.unrotate = function() { 
     return this.css({ 
     "transform": "", 
     "-ms-transform": "", /* Internet Explorer */ 
     "-moz-transform": "", /* Firefox */ 
     "-webkit-transform": "", /* Safari and Chrome */ 
     "-o-transform": "" /* Opera */ 
     });   
    }; 
}(jQuery, window));

我增加了一個功能，unrotate這樣你就可以刪除的CSS容易爲好。

pimvdb表示jQuery 1.8會自動嘗試前綴，因此如果您使用的是該版本或更高版本，則可能不需要任何東西，但transform屬性。

來源

2012-12-09 18:34:16 ErikE

$.fn.rotate = function(degree){ 
    this.each(function(){ 
     $(this).css({ 
     "transform": "rotate(" + degree + "deg)", 
     "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */ 
     "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */ 
     "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */ 
     "-o-transform": "rotate(" + degree + "deg)" /* Opera */ 
     }); 
    }); 
    return this; 
}

來源

2012-12-09 18:32:41 undefined

這正是我想要的，謝謝。 –

也許'返回this.each'繼續鏈接。而jQuery 1.8會自動嘗試前綴。 – pimvdb

感嘆。我必須停止使用手機來回答問題。太慢了！ – ErikE

如何調用自定義jQuery函數

回答

相關問題