用jquery设置类?

我有一个JavaScript函数,看起来像这样:

function UpdateFilterView(){ if(_extraFilterExists){ if($('#F_ShowF').val() == 1){ $('#extraFilterDropDownButton').attr('class', "showhideExtra_up"); $('#extraFilterDropDownButton').css("display", "block"); if($('#divCategoryFilter').css("display") == 'none'){ $('#divCategoryFilter').show('slow'); } return; } else{ if($('#divCategoryFilter').css("display") == 'block'){ $('#divCategoryFilter').hide('slow'); } $('#extraFilterDropDownButton').css("display", "block"); $('#extraFilterDropDownButton').attr('class', "showhideExtra_down"); return; } } else{ if($('#divCategoryFilter').css("display") != 'none'){ $('#divCategoryFilter').hide('fast'); } $('#extraFilterDropDownButton').css("display", "none"); } } 

这将由以下代码(从$(document).ready(function(){))触发:

 $('#extraFilterDropDownButton').click(function () { if($('#F_ShowF').val() == 1){ $('#F_ShowF').val(0); } else{ $('#F_ShowF').val(1); } UpdateFilterView(); }); 

这个HTML很简单:

 <div id="divCategoryFilter">...</div> <div style="clear:both;"></div> <div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div> 

我有两个问题:

  1. 当面板被隐藏,我们按下divbutton(extraFilterDropDownButton)时,页面左上angular的部分将闪烁,然后面板将被放下。

  2. 当面板显示,我们按divbutton面板将隐藏('慢'),但即使我们在UpdateFilterView脚本中设置它的button将不会更改为正确的类?

hover时,button上将设置正确的类,它将使用以下代码进行设置:

 $("#extraFilterDropDownButton").hover(function() { if($('#divCategoryFilter').css("display") == 'block'){ $(this).attr('class','showhideExtra_up_hover'); } else{ $(this).attr('class','showhideExtra_down_hover'); } }, function() { if($('#divCategoryFilter').css("display") == 'block'){ $(this).attr('class','showhideExtra_up'); } else{ $(this).attr('class','showhideExtra_down'); } }); 

要完全设置一个类,而不是添加一个或删除一个,使用这个:

 $(this).attr("class","newclass"); 

这样做的好处是,你将删除可能在那里设置的任何类,并将其重置为你喜欢的方式。 至less这在一种情况下适用于我。

使用jQuery的

 $(this).addClass('showhideExtra_up_hover'); 

 $(this).addClass('showhideExtra_down_hover'); 
 <script> $(document).ready(function(){ $('button').attr('class','btn btn-primary'); }); </script> 

我喜欢写一个小插件,使事情更清洁:

 $.fn.setClass = function(classes) { this.attr('class', classes); return this; }; 

这样你可以简单地做

 $('button').setClass('btn btn-primary');