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

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

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/

Answer 2

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

更改行：

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()的调用

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

2 个答案: