如何调用自定义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函数

回答

相关问题