シンプルなjQueryプラグインを構築するには、助けが必要

Question

私は初めてのjQueryプラグインを構築しています。私は、使用してプラグインを呼んでいる

(function($){ 
$.fn.extend({ 
    auchieFader: function(options) { 
     var defaults = { 
      mask: '', 
      topImg : '', 
     } 
     var options = $.extend(defaults, options); 
     return this.each(function() { 
      var o = options; 
      var obj = $(this); 
      var masker = $(o.mask, obj); 
      masker.hover(function() { 
       $(o.topImg).stop().animate({ 
       "opacity": "0" 
       }, "slow"); 
      }, function() { 
       $(o.topImg).stop().animate({ 
       "opacity": "1" 
       }, "slow"); 
      });  
     }); 
    } 
}); 
})(jQuery); 

：ここで私がこれまで持っているものだ

$('.fader').auchieFader({mask: ".mask", topImg: ".top"}); 

私はその後、別の要求を追加した場合は言う：何があっインスタンス次に

$('.fader2').auchieFader({mask: ".mask", topImg: ".top"}); 

私の2つのフェーダーのうち、私はそれらの両方がトリガされます。これは私のマスクマスクとtopImgオプションが同じクラスを持っているためですが、これらのアイテムが同じクラスを持つようにプラグインを変更するにはどうすればよいですか？私はそれがおそらく何か本当にシンプルだと知っていますが、私はまだ一般的にjQueryとJavascriptで自分の道を見ています。私のコードを改善するための他のヒントも大いにありがとう！

乾杯、 クリス

Answer 1

あなたは既にコードであなたの質問への答えを持っているようです。 DOM要素の内側にo.maskでクラスをスコープ

var masker = $(o.mask, obj); 

がOBJ

私はあなただけo.topImgのために同じことを行う必要があると思う：マスカーのためには、これを書きました。

てみ

masker.hover(function() { 
    $(o.topImg, obj) 

Answer 2

に

masker.hover(function() { 
    $(o.topImg) 

を変更するには、この方法を試してください。

(function($){ 
$.fn.extend({ 
    auchieFader: function(options) { 

     var 
      // defaults options 
      defaults = { 
       mask: null, 
       topImg: null 
      }, 
      // extend options in defaults 
      o = $.extend(defaults, options); 

     if (!o.mask || !o.topImg) return this; 

     return this.each(function() { 

      var 
       masker = $(o.mask, this), 
       topImg = $(o.topImg, this); 

      if (masker.length == 0 || topImg.length == 0) return; 

      masker.hover(
       function() { topImg.stop().animate({ "opacity": "0" }, "slow"); }, 
       function() { topImg.stop().animate({ "opacity": "1" }, "slow"); } 
      ); 

     }); 
    }; 
}); 
})(jQuery);