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个推子的哪个实例，我都会触发它们。我知道这是因为我的mask mask和topImg选项具有相同的类 - 但是如何修改插件以允许这些项具有相同的类？我知道它可能非常简单，但我仍然在寻找jQuery和Javascript的方法。关于改进我的代码的任何其他提示也将非常感谢！

干杯，克里斯

Answer 1

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

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

在dom元素 obj

内的 o.mask 中的类的范围

我认为你只需要为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);

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

2 个答案: