javascript - 如何使用 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 按钮时，面板将隐藏('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');
    }
  });

Answer 1

要完全设置一个类，而不是添加一个或删除一个，请使用:

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

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