構建簡單的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"}); 

那麼問題上沒有什麼實例我的兩個推子中的兩個都會觸發。我知道這是因爲我的面具面具和topImg選項具有相同的類別 - 但是，如何修改插件以允許這些項目具有相同的類別？我知道這可能非常簡單，但我仍然通過jQuery和Javascript找到自己的方式。任何其他提高我的代碼的提示也將不勝感激！

乾杯， 克里斯

Answer 1

你似乎已經有了答案在代碼中你的問題。對於掩蔽你寫這樣的：

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

的作用域的DOM元素的內部，o.mask類OBJ

我認爲你需要做的o.topImg同樣的事情。

嘗試改變

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

到

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

Answer 2

試試這個：

(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);