Изменить класс CSS элементы на лету

Question

на странице с помощью JQuery, если я хочу, чтобы изменить все классы от

col-lg-3 form-group 

в

col-lg-8 form-group 

Как я могу это сделать?

Answer 1

$('.col-lg-3.form-group').toggleClass('col-lg-3 col-lg-8'); 

.toggleClass просто переключает имена классов на основе из списка дали.

Итак, если вы запустите его снова, он вернется к оригиналу.

Answer 2

Существует несколько разных способов, но вот что я хотел бы сделать.

$('.form-group').removeClass('col-lg-3').addClass('col-lg-8'); 

Answer 3

Помимо Tuvia-х и ответы jlemm45, вы можете сделать:

$('.col-lg-3.form-group').switchClass("col-lg-3", "col-lg-8", 0) 

Answer 4

Вы можете использовать removeClass() и addClass(). Ниже код будет искать элементы, которые имеют как.col-lg-3 и .form-group как класс, и он будет удалить в col-lg-3 класс для этих элементов и добавитьcol-lg-8 класс.

$('.col-lg-3.form-group').removeClass('col-lg-3').addClass('col-lg-8'); 

Sample Demo

$(".form-group.col-lg-3").removeClass("col-lg-3").addClass('col-lg-8');

.form-group { 
 
    color: blue; 
 
    } 
 
    .col-lg-3 { 
 
    text-decoration: underline; 
 
    } 
 
    .col-lg-8{ 
 
font-size:50px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="form-group col-lg-3">text</h3> 
 
<h3 class="form-group">text</h3> 
 
<h3 class="col-lg-3">text</h3> 
 
<h3 class="form-group col-lg-3">text</h3>

Answer 5

Простой способ сделать это было бы, как показано ниже ..

$('.col-lg-3.form-group').removeClass('col-lg-3').addClass('col-lg-8')

Удаляет класс col-lg-3 и добавляет col-lg-8 ко всем элементам, которые имеют сочетания обоих классов col-lg-3 и form-group в его атрибуте класса.