Question

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

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

.red   { background:red }

.blue  { background:blue }

.green { background:green }

当时我想根据jquery变量#box设置的条件只向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>

Answer 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');}

Answer 2

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

 (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]);
 });

Answer 3

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

Answer 4

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

Answer 5

您可以使用$.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"); 
         }

 });

Answer 6

<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>

删除当前的css类并使用jquery添加新类

6 个答案: