我正在使用jquery.scrollablecombo.js进行jquery下拉。但是当我在我的HTML而不是类中使用它时，它显示的是classname。请参阅示例。
<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);
请帮助。
答案 0 :(得分：2)
问题在于代码中创建新元素的部分：
var $wrapper_e = $("<div />", {
className: "searchBar cb_selectWrapper"
});
传递给$()的对象文字必须由 HTML属性名称键入，而不是 DOM属性名称。 className是DOM属性，class是相关的HTML属性。你应该写：
var $wrapper_e = $("<div />", {
"class": "searchBar cb_selectWrapper"
});
答案 1 :(得分：0)
在不更改代码的情况下解决此问题的一种方法如下（我不知道它是否被视为黑客攻击）：
让我们说你有以下
...您可以使用jquery执行以下操作
$("div").addClass($(this).attr('classname'));
这样做的确是它实际上需要attr classname并将它放在class属性中。
我不确定的另一个答案是将所有className更改为代码中的类