jquery插件方法返回值不是对象

2023年10月2日 191次阅读

我写了一个jq-plugin,我首先想要初始化所选元素(所有元素 – 每个).

稍后在代码中我想获得一个方法生成的字符串.但它返回的只是对象而不是我的字符串.

我在互联网上做了很多研究,但我不知道如何一方面使插件“可链接”,另一方面又“返回任何值”.

你怎么看？

(function($){
    var methods = {
        init: function(val){
            // Actions to initialize ALL selected Elements
        }
        ,
        returner: function(val){
            alert('working with every selected element: '+$(this).width());
            // return anything
            return 'STRING PRODUCED BY THIS FUNCTION!';
        }
    }

    $.fn.myplug = function(method){
        var args = arguments;
        var init = 'init-myplug';
        return this.each(function(){
            var is_init = $(this).data(init);
            if (is_init && methods[method]){
                return methods[method].apply($(this), Array.prototype.slice.call(args, 1));
            } else if (!is_init && (typeof method === 'object' || !method)){
                $(this).data(init, true);
                return methods.init.apply($(this), Array.prototype.slice.call(args, 0));
            }
        });
    };
})(jQuery);

$('.selects_5_elements').myplug(); // init

$('.selects_5_elements').myplug('returner'); // get the string

最佳答案 第一步是从您的方法中收集结果.此时,您尝试通过每个回调尝试返回方法的结果,这不会起作用(每个回调中的返回值用于突破循环).

我建议将所有结果收集在这样的数组中：

var results = [];
this.each(function(){
    var is_init = $(this).data(init);
    if (is_init && methods[method]){
        results.push(methods[method].apply($(this), Array.prototype.slice.call(args, 1)));
    } else if (!is_init && (typeof method === 'object' || !method)){
        $(this).data(init, true);
        results.push(methods.init.apply($(this), Array.prototype.slice.call(args, 0)));
    }
});

此时您只需返回结果数组即可.但是,如果您想允许某些方法可链接,而其他方法返回方法调用的结果,那么您需要检查方法名称以确定要返回的值.

if (method == 'returner')
    return results;
else
    return this;

另外,请注意我们在这里返回一个数组,而不是字符串.原因是将为匹配选择器的每个元素调用您的方法.因此,如果您有五个匹配元素,您将获得一个包含5个字符串的数组.

如果你真的只想要一个字符串,那么你需要决定如何处理所有的重复项.你想加入所有的字符串吗？或者只返回第一个字符串？或者只是最后一个字符串？所有选项都很容易 – 您选择的将取决于您的要求.

点赞