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変更classNameしてみてclassください。

// 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 に答える