刪除當前的css類和使用jquery添加新的類

如何刪除添加到div的當前類，並根據條件集添加新的類？刪除當前的css類和使用jquery添加新的類

我的CSS包含3次不同的類別：在我要添加只有一個等級符合條件的jQuery變量my_color設置爲div的ID #box時間

.red { background:red } 

.blue { background:blue } 

.green { background:green }

。 my_color有3個值血，花園，天空當時只有一組。

的jQuery：

<script type="text/javascript"> 
(document).ready(function() { 

     if(my_color == "blood") 
      { /*help me to remove current class and add .red */} 
     else if(my_color == "garden") 
      {/*help me to remove current class and add .green */ } 
     else if(my_color == "sky") 
      {/*help me to remove current class and add .blue */ } 

}); 
</script>

來源

2013-02-04 galexy

其刪除不需要的類看起來像前一個回答http://stackoverflow.com/a/14685691/1957479 –

這個替換上紅/綠盒類/藍

if(my_color == "blood") 
      { $('#box').attr('class','red');} 
     else if(my_color == "garden") 
      { $('#box').attr('class','green');} 
     else if(my_color == "sky") 
     { $('#box').attr('class','blue');}

來源

2013-02-04 09:49:23 Anton

您可以指定新的之前刪除的所有類：

(document).ready(function() { 
    $(element).removeClass("red blue green"); 
    if (my_color == "blood") { 
     $(element).addClass("red"); 
    } 
    if (my_color == "garden") { 
     $(element).addClass("green"); 
    } 
    if (my_color == "sky") { 
     $(element).addClass("blue"); 
    } 
});

使用.attr('class', '')而不是removeClass也可以，但它也會刪除任何其他類你的元素可能有。

你也可以使用一個映射對象清理一下代碼：

(document).ready(function() { 
    $(element).removeClass("red blue green"); 
    var colorDictionary = { 
     "blood": "red", 
     "garden": "green", 
     "sky": "blue" 
    }; 
    $(element).addClass(colorDictionary[my_color]); 
});

來源

2013-02-04 09:49:38

謝謝無光，只是想它 – galexy

使用.attr（'class'，''）刪除添加到div的所有其他類。所以更好的辦法是隻刪除特定的類。 – galexy

@galexy是的。假設你想添加另一個可以指定大小和元素的類。每次調用將類屬性設置爲「」時，所有類都將被刪除，並且元素將恢復爲其默認樣式。如果您只刪除用於設置顏色的類，則指定元素大小的類將保持不變。 –

$('#selectorId').removeClass('red'); 
$('#selectorId').addClass('green');

來源

2013-02-04 09:50:09 Nirman

$('#box').attr('class', '').addClass(my_color);

來源

2013-02-04 09:50:22 salexch

你可以$.removeAttr()和$.addClass()做到這一點。

首先刪除設置爲#div的所有類，然後僅應用所需的class。更具體地講，你只能$.removeClass()

(document).ready(function() { 

    $("#box").removeAttr("class"); 

     if(my_color == "blood") 
     { 
      $("#box").addClass("red"); 
     } 
     else if(my_color == "garden") 
     { 
      $("#box").addClass("green"); 
     } 
     else if(my_color == "sky") 
     { 
      $("#box").addClass("blue"); 
     } 

});

來源

2013-02-04 09:51:11 DON

<script type="text/javascript"> 
    (document).ready(function() { 

    if(my_color == "blood") 
     {$("#select_element").removeClass("blue").addClass("red");} 
    else if(my_color == "garden") 
     { $("#select_element").removeClass("red").addClass("green"); } 
    else if(my_color == "sky") 
     { $("#select_element").removeClass("green").addClass("blue"); } 

    }); 
</script>

來源

2013-02-04 09:51:38 EnterJQ

刪除當前的css類和使用jquery添加新的類

回答

相關問題