用jquery设置类？ [英] Set class with jquery?

问题描述

 函数UpdateFilterView（）{
 
 if（_extraFilterExists）{
 
 if（$（'＃F_ShowF'）。val（）== 1）{
 
 $（'＃extraFilterDropDownButton'）。attr（' class'，showhideExtra_up）; 
 $（'＃extraFilterDropDownButton'）。css（display，block）; $（$＃
 $ b）if（$（'＃divCategoryFilter'）。css（display）=='none'）{
 $（'＃divCategoryFilter'）。show（'slow'）; 
} 
 return; 
 
 $ b其他{
 
 if（$（'＃divCategoryFilter'）。css（display）=='block'）{
 $（ '＃divCategoryFilter'）隐藏（ '慢'）; 
} 
 
 $（'＃extraFilterDropDownButton'）。css（display，block）; 
 $（'＃extraFilterDropDownButton'）。attr（'class'，showhideExtra_down）; 
 
 return; 
 
 
 $ b else {
 if（$（'＃divCategoryFilter'）。css（display）！='none'）{
 $（'＃divCategoryFilter'）。hide（'fast'）; 
} 
 $（'＃extraFilterDropDownButton'）。css（display，none）; 
 
 
 
 
 $ b $ p 
 $ b 
这将由以下代码触发$（document）.ready（function（）{）：
 
 
  $（'＃extraFilterDropDownButton'）。click（function（ ）{
 if（$（'＃F_ShowF'）。val（）== 1）{
 $（'＃F_ShowF'）。val（0）; 
} 
 （$＃b $ b $（'＃F_ShowF'）。val c $ c> 
 HTML很容易： 
 
 
 < div style =clear：both;>< / div> 
< div  < / 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'）; （$（'＃divCategoryFilter'）。css（display）=='block'）{
 $ b $，
 function（）{
 
 if 
 $（this）.attr（'class'，'showhideExtra_up'）; 
} 
 else {
 $（this）.attr（'class'，'showhideExtra_down'）; 
} 
}）; 
  
 
 
解决方案
完全设置一个类，而不是添加一个或删除一个，使用这个： 
 
 
  $（this）.attr（class，newclass）; 
  
这样做的好处是您可以删除可能在其中设置的任何课程并将其重置为你喜欢什么。至少这在一种情况下适用于我。  
I have a javascript function that looks like this: 
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 () {): 
$('#extraFilterDropDownButton').click(function () {
    if($('#F_ShowF').val() == 1){
        $('#F_ShowF').val(0);
    }
    else{
        $('#F_ShowF').val(1);
    }

    UpdateFilterView();
});
The HTML for this is easy: 
<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</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?
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');
    }
});

解决方案
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. 

                        
这篇关于用jquery设置类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！