-3

私は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);

上記の関数をこのように変更するにはどうすればよいですか?

4

2 に答える 2

3 
$.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-09T18:32:41.490 に答える
1

を使用する必要はありませんeach()。jQuerycss()関数は、ほぼすべての jQuery 関数と同様に、セット全体で機能します。

これは、新しい jQuery プラグインを作成するための、業界で認められたベスト プラクティス (少なくともそれに近い) 方法です。コードが機能しなかった理由は、グローバル関数を宣言しただけだからです。jQuery オブジェクトが関数にアクセスできるようにするには、関数を jQuery オブジェクト自体に追加する必要があります。これにより、そのオブジェクトのインスタンスと適切にペアになりthis、現在の jQuery セットにアクセスできるようになります。これは次のように行われます。すべてをラップする関数の面白い部分は、オンラインのほとんどの jQuery プラグイン チュートリアルで読むことができるさまざまな理由で行われます。$(this)jQuery 関数内では、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));

unrotatecssも簡単に削除できる機能を追加しました。

pimvdbtransformによると、jQuery 1.8 では自動的にプレフィックスが試行されるため、そのバージョン以降を使用している場合はプロパティ以外は必要ないかもしれません。

于 2012-12-09T18:34:16.433 に答える