1

下一个代码在 Jquery 1.5.1 中工作,但在 Jquery 1.8.0 中这个代码不起作用,为什么?css的问题添加跨度后。如何解决这个滞后?

原始文件在这里

如果包含在 index.html jquery.1.5.1 代码中有效,但如果包含 jquery 1.8.1,则代码并非全部有效...

CSS:

#checkbox .CheckBox{
    background:url('checkbox_33.png') no-repeat right bottom;
    display:inline-block;
    min-width:110px;
    /* height:33px; */
    height:33px;
    white-space:nowrap;
    position:relative;
    cursor:pointer;
    margin-left:14px;
}

jQuery代码

(function($){
    $.fn.Checkbox = function(options){

        // Default On / Off labels:

        options = $.extend({
            labels : ['ON','OFF']
        },options);

        return this.each(function(){
            var originalCheckBox = $(this),
                labels = [];

            // Checking for the data-on / data-off HTML5 data attributes:
            if(originalCheckBox.data('on')){
                labels[0] = originalCheckBox.data('on');
                labels[1] = originalCheckBox.data('off');
            }
            else labels = options.labels;

            // Creating the new checkbox markup:
            var checkBox = $('<span>',{
                className   : 'CheckBox '+(this.checked?'checked':''),
                html:   '<span class="CBContent">'+labels[this.checked?0:1]+
                        '</span><span class="CBPart"></span>'
            });

            // Inserting the new checkbox, and hiding the original:
            checkBox.insertAfter(originalCheckBox.hide());

            checkBox.click(function(){
                checkBox.toggleClass('checked');

                var isChecked = checkBox.hasClass('checked');

                // Synchronizing the original checkbox:
                originalCheckBox.attr('checked',isChecked);
                checkBox.find('.CBContent').html(labels[isChecked?0:1]);
            });

            // Listening for changes on the original and affecting the new one:
            originalCheckBox.bind('change',function(){
                checkBox.click();
            });
        });
    };
})(jQuery);
4

1 回答 1

1

创建span元素时,尝试更改classNameclass

// Creating the new checkbox markup:
var checkBox = $('<span>',{
    class   : 'CheckBox '+(this.checked?'checked':''),
    html:   '<span class="CBContent">'+labels[this.checked?0:1]+'</span><span class="CBPart"></span>'
});
于 2012-11-04T14:17:57.777 回答