用jquery设置类？

Question

我有一个看起来像这样的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. 当面板是隐藏的,我们按下按钮的div(extraFilterDropDownButton)页面的左上方会闪烁,然后小组将进行动画了.

2. 当显示面板并按下div按钮时,面板将隐藏('慢'),但即使我们在UpdateFilterView脚本中设置它,该按钮也不会更改为正确的类？

在悬停时,按钮上将设置正确的类,使用以下代码进行设置:

$("#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");

这样做的好处是,您将删除可能在其中设置的任何类,并将其重置为您喜欢的方式.在某种情况下,至少这对我有用.

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