用jQuery设置类？|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>

我对此有两个问题：

当面板被隐藏并且我们按下div按钮（extraFilterDropDownButton）时，页面的左上部分将闪烁，然后面板将被动画化。
当显示面板并按下div按钮时，该面板将隐藏（'slow'），但是即使在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');
    }
});

要完全设置一个类，而不是添加一个或删除一个，请使用以下命令：

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

这样做的好处是，您将删除可能在其中设置的所有类，并将其重置为所需的样式。至少这在一种情况下对我有用。

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

本文地址：http://jquery.askforanswer.com/yongjqueryshezhilei.html
文章标签：html , jquery
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载