動態更改

在使用jQuery一個頁面元素的CSS類，如果我想從動態更改

col-lg-3 form-group

改變所有類

col-lg-8 form-group

我怎麼能這樣做？

來源

2016-04-20 user1765862

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

.toggleClass只是基於給定的列表切換類名。

所以，如果你再次運行它會回到原來的。

來源

2016-04-20 16:03:12 Tuvia

有幾種不同的方式，但這是我會做的。

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

來源

2016-04-20 16:05:37 jlemm45

這會將'col-lg-8'添加到沒有'col-lg-3'類的'.form-group's。 – xDaizu

除了圖維亞的和jlemm45的答案，你可以這樣做：

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

來源

2016-04-20 16:06:22 suufi

是的，但你必須添加jQuery UI到你的堆棧... – Tuvia

您可以使用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>

來源

2016-04-20 16:10:01 Pbk1303

簡單的方法來做到這一點會像下面..

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

刪除col-lg-3類，並將col-lg-8添加到在其類屬性中具有類別col-lg-3和form-group的組合的所有元素。

來源

2016-04-20 16:16:27

根據不同的情況，這種方式可能比'.switchClass'或'.toggleClass'更受歡迎，因爲它不會偶然發生另一種方式。 **作爲陳述的問題，我會選擇這個答案。**爲了增加可讀性和安全性（消歧），我認爲詳細程度（和一些表現）是一個很好的折衷**。 – xDaizu

是的問題是這樣說的，這是最好的方法.. toggleClass和switchClass甚至不會在這裏第二次在給定的情況下工作，這是違反它的使用目的....我更喜歡他們在實際使用時切換和來回切換..我不認爲這是必要的，所以我保持簡單 –

回答

相關問題