插件中的元素不接受 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 函数中所做的那样），这都会向我抛出：

[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

这意味着这两个元素都已成功记录，这意味着它们确实存在而且我没疯！有人可以将我从我目前居住的隧道中救出来。提前谢谢。这是完整的脚本：Full Script

Answer 1

问题是，您要在创建之前搜索 theLabelSpinner。

换行：

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

Live Demo

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

Answer 2

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

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

您是否尝试过使用 jQuery 选择器将其包装起来以创建跨度作为对象，例如。

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

如果这不起作用，您可以发布一个带有沙坑样本的 JSFiddle 吗？

编辑：

我分叉了它，现在正在工作。问题在于我之前的响应以及 labelSpinner 在添加到 dom 树之前被设置的事实。

http://jsfiddle.net/XP5U4/