jQuery 替换 class 属性

Question

如何将 class 值更改为不同的值：

这里是 html:

<div class="example_infobox">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Messages</span>
        <span class="info-box-number">1,410</span>
      </div><!-- /.info-box-content -->
    </div><!-- /.info-box -->
  </div><!-- /.col -->
</div>

这里是 jQuery 代码：

$('.example_infobox .info-box-icon.bg-aqua').attr('class', 'info-box-icon ' + 'bg-green');

以上jQuery代码改动：

<span class="info-box-icon bg-aqua">

至：

<span class="info-box-icon bg-green">

上面的代码有效，但是是否可以编写 jQuery 代码来更改 class，只需将 bg-aqua 替换为 bg-green 而无需指定整个 class（正如我在 jQuery 代码中所做的那样）？我的意思是，是否可以用新值替换 class 的一部分，类似于 C# 中的 string.replace？

谢谢

Answer 1

您可以使用$.fn.toggleClass()

使用

$('.example_infobox .info-box-icon.bg-aqua').toggleClass('bg-aqua bg-green');

或，$.fn.removeClass() and $.fn.addClass()

的组合

$('.example_infobox .info-box-icon.bg-aqua').removeClass('bg-aqua').addClass('bg-green');

Answer 2

$('.example_infobox-icon').removeClass('bg-aqua').addClass('bg-green')

Answer 3

你可以先通过'.hasClass()'检查其中存在哪些class。然后你可以像这样应用添加和删除 classes:

if($('.example_infobox .info-box-icon.bg-aqua').hasClass('bg-green'))
{
    $('.example_infobox-icon').removeClass('bg-green').addClass('bg-aqua');
}
else
{
    $('.example_infobox-icon').removeClass('bg-aqua').addClass('bg-green');
}

jQuery 替换 class 属性

jQuery replace a class attribute

html

jquery

attr