0

这是一个复选框修改器插件。如果你有一个复选框类型的输入，这个插件基本上会创建一个更美观的版本。但是，我的一个变量似乎有问题。

输入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

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

4

2 回答 2

0

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

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/

于 2013-11-14T04:34:00.357 回答
0

问题是，您在创建之前搜索 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()

于 2013-11-14T04:48:47.500 回答