如何使用jQuery>更改元素的类? [英] How can I change the class of an element with jQuery>

问题描述

我有一个如下所示的JavaScript函数:

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");
  }
}

这将由以下代码触发(从$(document).ready(function () {})内部:

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();
});

HTML很简单:

<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div>

我对此有两个问题:

1. 隐藏面板后，当我们按div按钮(extraFilterDropDownButton)时，页面的左上部分将闪烁，然后将面板动画化.

1. 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.

显示面板并按div按钮时，面板将显示hide('slow')，但是即使在UpdateFilterView脚本中进行了设置，该按钮也不会更改为正确的类?

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屋！