插件中的元素将不接受jQuery方法

Question

这是一个复选框修饰符插件。 如果您输入复选框种类，则此插件基本上会创建一个更美观的版本。 但是，我的变量之一似乎有问题。

输入theLabelSpinner变量。 该变量应该表示一个<span>元素，该元素将插入到相应复选框的标签中（通过jQuery）。 如果选中了当前状态（复选框的值），则此微调器将向右移动。 如果未选中，则此微调器将保留在左侧。

不幸的是，每当我尝试在元素上调用任何jQuery函数时，它都根本不起作用。 控制台不会引发错误，实际上，我什至成功地记录了这两个元素。

(function($) {

$.fn.bvCheckbox = function( customOptions ) {

    this.each( function(i) { // Beginning of loop

    var theEl = $(this); //the element
        theID = theEl.attr( 'id' ); //id="" attribute
        theName = theEl.attr( 'name' ); //name="" attribute
        theClass = theEl.attr( 'class' ); //class="" attribute

    var theLabel = $( "label[for='" + theID + "']" ); //the label corresponding to the checkbox element
        theLabelText = theLabel.text();
        theLabelSpinner = theLabel.children( 'span.bv-jquery-checkbox-label-spinner' );

    /**
     * Initiates the plugin, runs all the functions.
     *
     * */
    function init() { 
        //prepare the checkbox
        prepareCheckbox();

        //initiate current states
        initStates();
    }

    init();

    /**
     * Prepares checkbox and corresponding labels
     * */
    function prepareCheckbox() {
        //rid the label of any text
        theLabel.empty();

        //hide the checkbox
        theEl.hide();

        //add the class 'bv-jquery-checkbox-label'
        theLabel.addClass( 'bv-jquery-checkbox-label' );

        //insert the spinner
        theLabel.append( '<span class="bv-jquery-checkbox-label-spinner"></span>' )
    }

    /**
     * Sets the initial states for the checkboxes when
     * the page loads
     * */
    function initStates() {

        if ( ! currentState( theEl ) ) {
            console.log( theLabelSpinner ); // I logged it successfully
            theLabelSpinner.hide(); // Problem arises!
        }

    }

    /**
     * Retrieves the current value of the checkbox
     * STATES:
     * --------
     * checked: 1
     * unchecked: 0
     * */
    function currentState() {
        if ( theEl.is( ":checked" ) ) {
            return 1;
        } else {
            return 0;
        }
    } 

    });//End of loop

}

}(jQuery));

在initStates函数期间发生问题。 可以根据复选框的状态来初始化微调器元素的位置。 但是，它不起作用。 我什至尝试了一个简单的jQuery函数，例如.hide() ，但都没有起作用。 每当我登录微调器时（就像我在initStates函数中所做的initStates ），就会被扔给我：

[prevObject: x.fn.x.init[1], context: document, jquery: "1.10.2", constructor:function, init: function…] script.js:78

[prevObject: x.fn.x.init[1], context: document, jquery: "1.10.2", constructor:function,    init: function…] script.js:78

这意味着两个元素均已成功记录，这意味着它们确实存在并且我并不疯狂！ 有人可以从我目前居住的隧道中救出我。谢谢。 这是运行中的完整脚本： 完整脚本

Answer 1

初始化微调器时，在此处设置该值（我相信）

theLabel.append( '<span class="bv-jquery-checkbox-label-spinner"></span>' )

您是否尝试过使用jQuery选择器包装它来将跨度创建为一个对象，例如。

theLabel.append( $('<span class="bv-jquery-checkbox-label-spinner"></span>') );

如果这样做不起作用，您可以将JSFiddle与sandpit示例一起发布吗？

编辑：

我分叉了，现在正在工作。 问题既是我之前的回答，也是我在将labelSpinner添加到dom树之前进行了设置的事实。

http://jsfiddle.net/XP5U4/

Answer 2

问题是，在创建LabLabSpinner之前，您正在搜索它。

更改行：

theLabelSpinner = theLabel.children( 'span.bv-jquery-checkbox-label-spinner' );

至：

theLabelSpinner = null;

并更新：

theLabel.append( '<span class="bv-jquery-checkbox-label-spinner"></span>' )

至：

//Create the spinner and hold a reference to it.
theLabelSpinner = $('<span />', {
    'class': 'bv-jquery-checkbox-label-spinner'
});

//insert the spinner            
theLabel.append(theLabelSpinner);

现场演示

如果在上面的演示中检查DOM，您会看到微调器已设置为display:none; 响应您对.hide()调用