删除当前的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添加新的类

回答

相关问题