Question

我是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);

如何更改上述功能？

Answer 1

$.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;
}

Answer 2

无需使用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属性，那么除了{{1}}属性之外，您可能不需要任何其他内容。

如何调用自定义jQuery函数

2 个答案: