用jQuery设置类?

2020/11/30 23:51 · jquery ·  · 0评论

我有一个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按钮时,该面板将隐藏('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
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!