0

我正在扩展jquery.contentcarousel 插件，并且我已经达到了一个特定的点，我通过__prototype__. 我缩小了代码以演示基本部分：

(function($) {
    var   aux      = {
    navigate : function(){
        //...
      },
    }
    methods = {
        init     : function( options ) {

            return this.each(function() {

                var $el        = $(this);

                //THIS IS THE SLIPPERY LINE:
                $el.__proto__.scrollOneLeft = function() {
                    aux.navigate( -1, $el, $wrapper, $.extend(settings, {sliderSpeed: 10, sliderEasing: ''}), cache );
                };
            });

        }
    }

    $.fn.contentcarousel = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
        }
    }; 

})(jQuery);

这适用于现代浏览器，但问题是它$el.__proto__不适用于 IE9 和 IE10（还）。我不是 jQuery Ninja，所以我想这无论如何都不是正确的解决方案。

所以我的问题是，在这种情况下，您将如何正确定义新方法？

4

1 回答 1

2

是的，这不是正确的做法。jQuery 有很好的扩展能力，这个案例已经用跨浏览器的方式覆盖了。

您可以通过以下方式在 jQuery 数组对象上定义新函数：

jQuery.fn.asdfize = function () {
    this.html('asdf');
    return this; // for chainability
}

您可以使用$('div').asdfize();. 替换所有 div 的 innerHTML asdf。

这基本上就是您所需要$(this)的，就像 jQuery 数组对象 ( jQuery.fn) 作为原型一样。

旧的 jQuery wiki 有一篇关于插件创作的好文章，其中涵盖了这一点。

编辑：

您已经在代码中使用$.fn.contentcarousel. 这另一种情况有何不同？

编辑2：

在这部分代码中：

return this.each(function() {
    var $el = $(this);
    $el.__proto__.scrollOneLeft = function() { ... };
});

scrollOneLeft您在每个迭代中覆盖该函数。这可能不是你想要的！

您可能只想定义一次函数，但this在其中使用它，因为它将是您调用它的 jQuery 对象。

于 2013-05-09T12:00:48.983 回答