如何使用 jQuery> 更改元素的类>答案

【问题标题】：How can I change the class of an element with jQuery>如何使用 jQuery> 更改元素的类>
【发布时间】：2011-07-09 11:16:13
【问题描述】：

我有一个如下所示的 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 按钮时，面板将hide('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');
    }
  });

【问题讨论】：

只是一个建议：如果您发布一个 minimal 代码示例来证明您的问题，您的问题可能更有机会在这里得到回答，最好使用jsFiddle。跨度>
总而言之...您是否只是要求一个按钮来显示隐藏的 div，然后在显示时隐藏 div？
“但按钮不会更改为正确的类” - 哪个是正确的类..？ “当面板隐藏时” - 我不明白你所说的面板是什么意思..？

标签： javascript html jquery

【解决方案1】：

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

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

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

【讨论】：

好的。但是 OP 也在使用 .attr('class', "showhideExtra_down") 那么这应该如何解决这个问题..？
答案正确且有效！ .attr('class', "className") 是正确的。

【解决方案2】：

使用 jQuery 的

$(this).addClass('showhideExtra_up_hover');

和

$(this).addClass('showhideExtra_down_hover');

【讨论】：

【解决方案3】：

<script>
$(document).ready(function(){
      $('button').attr('class','btn btn-primary');
}); </script>

【讨论】：

我认为，当您为您的意图添加一些解释时，这对 OP 和更多访问者会更有帮助。
此代码示例有助于清楚地了解如何通过在它们之间使用空格来添加 2 个或更多类。

【解决方案4】：

我喜欢写一个小插件来让事情变得更干净：

$.fn.setClass = function(classes) {
    this.attr('class', classes);
    return this;
};

这样你就可以做到

$('button').setClass('btn btn-primary');

【讨论】：