试图为自定义复选框创建一个jquery插件

Question

我正在尝试创建自己的样式复选框jQuery插件。我想要做的是隐藏工作的复选框，并在复选框后附加一个跨度，但在复选框后没有添加跨度。这是为什么？

SETUP

var checkBox1 = $("<input type='checkbox'/>");
$(checkBox1).genCheckBox();
$(divBGContainer).append(checkBox1);

PLUGIN

(function($) {

    $.fn.genCheckBox = function(settings) {

        var def = {

            height: 15,
            width: 15

        };


        $(this).css("display", "none");


        var span = $("<span/>");
        $(span).insertAfter(this);

    }

})(jQuery);

Answer 1

问题可能是你的选择器。我想您想要获取页面上的所有复选框并将其转换为自定义复选框，对吧？

请改为尝试：

$("input[type='checkbox']").genCheckBox();

修改

请注意，您可能希望确保插件可以接收多个元素。所以你应该循环遍历这些元素，并逐一对它们执行操作。

这样的事情：

(function($) {

    $.fn.genCheckBox = function(settings) {
        var def = {
            height: 15,
            width: 15
        };

        this.each(function() {
           $(this).hide();
           $("<span/>").insertAfter(this);
        });
    }
})(jQuery);

Answer 2

你的选择器错了试试这个。

$("input:checkbox").genCheckBox();

或

$("input[type='checkbox']").genCheckBox();

Answer 3

在添加插件之前，我没有先附加复选框。

var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1); 
$(checkBox1).genCheckBox();