用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'); } }); 

Answer 1

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

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

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

Answer 2

使用jQuery的

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

和

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

Answer 3

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

Answer 4

我喜欢写一个小插件，使事情更清洁：

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

这样你可以简单地做

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