Javascript 插件中的元素赢得'；不接受jQuery方法

这是一个复选框修改器插件。如果您输入了多种复选框，这个插件将基本上创建一个更美观的版本。然而，我的一个变量似乎有问题

输入

labelspinner

变量。该变量应该表示插入相应复选框标签中的

元素（通过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));

---

这意味着这两个元素都被成功地记录下来了，这意味着它们确实存在，我没有发疯！有人能把我从我现在居住的隧道里救出来吗。提前谢谢。下面是完整的脚本：

初始化微调器时，在这里设置值（我相信）

theLabel.append（“”）

您是否尝试过使用jQuery选择器将其包装，以将范围创建为对象，例如

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

label.append（$（''）；

如果这不起作用，您可以发布一个带有沙坑示例的JSFIDLE吗

编辑：

我用叉子叉了起来，现在正在工作。问题在于我之前的回答以及labelSpinner在添加到dom树之前被设置的事实

---

问题是，您正在创建标签旋扣器之前搜索它

更改行：

theLabelSpinner=theLabel.children（'span.bv jquery复选框标签微调器'）

致：

theLabelSpinner=null

和更新：

theLabel.append（“”）

致：

//创建微调器并保留对它的引用。
标签指针=$（''{
“类”：“bv jquery复选框标签微调器”
});
//插入微调器
附加标签（标签指针）；


如果您在上面的演示中检查DOM，您将看到微调器已设置为
display:none
作为对您调用
.hide（）
的响应，不幸的是，它不起作用，如果您仍然感兴趣，我确实发布了一个JSFIDLE。请检查更新和分叉小提琴（听起来很顽皮）谢谢！非常感谢你的帮助！我有严重的隧道视力。再次感谢！
theLabel.append( '<span class="bv-jquery-checkbox-label-spinner"></span>' )

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);