0

我有一个非常粗糙的 jQuery 插件，它用一个 CSS 样式的 div 包装了一个复选框并隐藏了实际的复选框。我在输入元素上运行插件，但希望插件返回包装 div 以进行链接，因为输入元素是不可见的。

(function ($) {

var methods = {       

    'init': function (options) {

        var settings = $.extend({
            'location' : 'top',
            'background-color' : 'blue'
        }, options);            

        return this.each(function () {  
            var $this = $(this);
            var checked = $this.attr('checked') || '';
            $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
            return $(this).parent('.styled-checkboxes')[0];
        });
    }           
};

$.fn.styledCheckboxes = function (method) {

    if (methods.method) {
        //
    } else if (typeof options === 'object') {
        return methods.init.apply(this, options);
    } else {
        console.log('init without options');
        return methods.init.apply(this, null);
    }        
}
})(jQuery);

当我这样调用插件时： 

console.log(
    $('input[type="checkbox"]').styledCheckboxes().after('<p>hello world</p>')
);

附加的 p 在复选框之后添加，而不是 div，并且控制台跟踪是一个 jQuery 选择，其中包含我在页面上拥有的任何输入项，而不是包装输入的 div。为什么是线

return $(this).parent('.styled-checkboxes')[0];

不返回 div 作为用于链接的对象？

4

1 回答 1

2

原因是因为返回内部的任何内容each都不会覆盖返回的对象……返回each的始终是集合本身。

您可以返回的结果，this.map它应该可以按预期工作，因为map仍然会枚举列表中的所有项目，并且您可以操作返回的项目：

return this.map(function () {  
        var $this = $(this);
        var checked = $this.attr('checked') || '';
        $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
        return $(this).parent('.styled-checkboxes')[0];
    });

实例： http: //jsfiddle.net/wBUzP/（“hello world”在新增之外div）

于 2012-09-19T09:49:19.877 回答