jQuery заменяет атрибут класса

Как я могу изменить значение класса на другое значение:

Вот 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">

to:

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

Приведенный выше код работает, но можно ли написать код jQuery для изменения класса, просто заменив bg-aqua на bg-green без необходимости указывать весь класс (как я сделал в своем коде jQuery)? Под этим я подразумеваю, можно ли заменить часть класса новым значением, подобным string.replace в C#?

Спасибо


html jquery attr
person user3736648    schedule 02.06.2015    source источник
comment
Используйте addClass() или removeClass().   -  person Drew Baker    schedule 02.06.2015

Ответы (2)


arrow_upward
6
arrow_downward

Вы можете использовать $.fn.toggleClass()

Использовать

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

ИЛИ, комбинация $.fn.removeClass() и $.fn.addClass()

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

arrow_upward
2
arrow_downward

Вы можете сначала проверить, какой класс существует в нем, с помощью '.hasClass()'. Затем вы можете применить добавление и удаление классов следующим образом:

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');
}
person Rohit Arora    schedule 02.06.2015