构建简单的jQuery插件，需要帮助答案

【问题标题】：Building simple jQuery plugin, need assistance构建简单的jQuery插件，需要帮助
【发布时间】：2011-01-13 15:50:49
【问题描述】：

我正在构建我的第一个 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 的方法。任何其他关于改进我的代码的提示也将不胜感激！

干杯，克里斯

【问题讨论】：

不看你的标记是不可能知道的。 .mask 在 .fader 里面吗？

标签： javascript jquery plugins jquery-plugins

【解决方案1】：

您似乎已经在代码中找到了问题的答案。对于你写的掩码：

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

在 o.mask 内的 dom 元素 obj

中限定类

我认为你只需要为 o.topImg 做同样的事情。

尝试改变

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

进入

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

【讨论】：

谢谢！我知道这很简单！

【解决方案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);

【讨论】：