0

如何删除当前添加到 div 的类并根据条件集添加新类？

我的 CSS 包含 3 个不同的类：

.red   { background:red }

.blue  { background:blue }

.green { background:green }

当时我只想#box根据 jquery 变量设置的条件向 div id 添加一个类my_color。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>
4

6 回答 6

1 
$('#box').attr('class', '').addClass(my_color );
于 2013-02-04T09:50:22.783 回答
1

这将框上的类替换为红色/绿色/蓝色

   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-04T09:49:23.207 回答
1

您可以在分配新课程之前删除所有课程：

 (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-04T09:49:38.790 回答
0 
$('#selectorId').removeClass('red');
$('#selectorId').addClass('green');
于 2013-02-04T09:50:09.523 回答
0

你可以用$.removeAttr()and来做到这一点$.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-04T09:51:11.020 回答
0 
<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-04T09:51:38.093 回答