javascript - Jquery 类名称未正确显示

Question

我将 jquery.scrollablecombo.js 用于 jquery 下拉菜单。但是当我在我的 HTML 中使用它而不是类时，它显示的是类名。请看例子。

<div classname="searchBar cb_selectMain cb_down"></div>

因此 css 无法正确显示。

scrollablecombo.js 的代码

(function($) {

    $.fn.scrollablecombo2 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo2.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'cb_selectWrapper3'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'cb_selectMain3 cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select3'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };


    $.fn.scrollablecombo = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'searchBar cb_selectWrapper'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'searchBar cb_selectMain cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
    $.fn.scrollablecombo.defaults = {

    };
    $.fn.scrollablecombo1 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo1.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'share cb_selectWrapper2'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'share cb_selectMain2 cb_down2'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select2'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99);
                $wrapper_e.css('z-index',parseInt(maxzidx+100)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',100).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
})(jQuery);

请帮忙。

Answer 1

问题出在创建新元素的代码部分:

var $wrapper_e = $("<div />", {
    className: "searchBar cb_selectWrapper"
});

您传递给 $() 的对象文字必须以 HTML 属性名称 为键，而不是 DOM 属性名称。 className 是一个 DOM 属性，class 是相关的 HTML 属性。你应该写:

var $wrapper_e = $("<div />", {
    "class": "searchBar cb_selectWrapper"
});