0

divに追加された現在のクラスを削除し、条件セットに従って新しいクラスを追加する方法は?

私のcssには3つの異なるクラスが含まれています：

.red   { background:red }

.blue  { background:blue }

.green { background:green }

#boxその際、jquery variable で設定された条件に従って、div id にクラスを 1 つだけ追加したいと考えていますmy_color。my_color血、庭、空の 3 つの値を一度に 1 セットだけ持っています。

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

これにより、ボックスのクラスが赤/緑/青に置き換えられます

   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 に答える