jQuery 用jquery设置类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5205052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set class with jquery?
提问by Banshee
I have a javascript function that looks like this:
我有一个如下所示的 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");
}
}
This will be triggered by the following code (from within the $(document).ready(function () {):
这将由以下代码触发（来自 $(document).ready(function () {）：
$('#extraFilterDropDownButton').click(function () {
if($('#F_ShowF').val() == 1){
$('#F_ShowF').val(0);
}
else{
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
The HTML for this is easy:
这个 HTML 很简单：
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
I have two problems with this:
我有两个问题：
When the panel is hidden and we press the div button(extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.
When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?
当面板隐藏并且我们按下 div 按钮（extraFilterDropDownButton）时，页面的左上部分将闪烁，然后面板将向下动画。
当面板显示并且我们按下 div 按钮时，面板将隐藏（'slow'），但是即使我们在 UpdateFilterView 脚本中设置它，该按钮也不会更改为正确的类？
The correct class will be set on the button when hovering it, this is set with the following code :
将鼠标悬停在按钮上时，将在按钮上设置正确的类，这是使用以下代码设置的：
$("#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');
}
});
回答by patrick
To set a class completely, instead of adding one or removing one, use this:
要完全设置一个类，而不是添加一个或删除一个，请使用以下命令：
$(this).attr("class","newclass");
Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.
这样做的好处是您将删除可能在那里设置的任何类并将其重置为您喜欢的方式。至少在一种情况下这对我有用。
回答by Seth
Use jQuery's
使用 jQuery 的
$(this).addClass('showhideExtra_up_hover');
and
和
$(this).addClass('showhideExtra_down_hover');
回答by nextzeus
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
回答by plgrenier
I like to write a small plugin to make things cleaner:
我喜欢写一个小插件来让事情变得更清晰：
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
That way you can simply do
这样你就可以简单地做
$('button').setClass('btn btn-primary');
