Создание простого плагина 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

У вас, похоже, уже есть ответ на ваш вопрос в коде. Для маскера вы написали это:

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

Какая область действия класса o.mask внутри элемента dom 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);