jQuery cssの初期値の設定の仕方

Question

$('.color').click(function(){	
  var index3 = $('.color').index($(this));
  if(index3 === 0){
   ??????????????????????		 
   }else if(index3 === 1){
    $('body').css({'background-color':'#00F',
                   'background':'linear-gradient(to bottom,#00F,#00F)',
                   'border':'none'});	
   }else if(index3 === 2){
    $('body').css({'background-color':'#000',
                   'background':'linear-gradient(to bottom,#000,#000)',
                   'border':'none'});
   }else if(index3 === 3){
    $('body').css({'background-color':'#0FF',
                   'background':'linear-gradient(to bottom,#0FF,#0FF)',
                   'border':'none'});
   };
  }); 

   <ul id="colors">
     <li class="color">白</li>
     <li class="color">青</li>
     <li class="color">黄</li>
     <li class="color">黒</li>
    </ul>

・やりたいこと・
jQueryのクリックイベントでクリックしたindexの番号で色を変えたい。
初期設定の色＝白
（例）黄をクリック 白→黄

・困っていること・
index3 === 0の箇所がcssで初期設定を行っている部分なのですが、初期設定の白から青、黄、黒に色を変更した後に青、黄、黒から初期設定の白に変更するための記述がわかりません。
青、黄、黒は単色で設定するので大丈夫なのですが、白はグラデーション等を使用しているため全て記述するのが大変になってしまい困っております。
もし初期設定のcssをjQueryで保存?など簡単に記述できる方法はありますでしょうか?
それとも一から初期設定のcssを改めて記述しないといけないでしょうか?
ネットで調べてみましたがサイトが見つからず、また検索ワードもあまりわかっていないため調べることができませんでした。
お手数ですがご教授頂けましたら幸いです。よろしくお願い致します。

Answer 1

jQuery側にcssの細かい仕様を記述するとメンテナンスが大変なので私なら以下のようにします。

.blue {
  background-color:#00F;
  background: linear-gradient(to bottom,#00F,#00F);
  border:none;
}

.yellow {
  background-color: #0FF;
  background: linear-gradient(to bottom,#FF0,#FF0);
  border: none;
}

.black {
/* 黒のスタイル（略） */
}

.white {
/* 白のスタイル（略）*/
}

<ul id="colors">
  <li class="color" data-color="white">白</li>
  <li class="color" data-color="blue">青</li>
  <li class="color" data-color="yellow">黄</li>
  <li class="color" data-color="black">黒</li>
</ul>

$('.color').on('click', function(){
  var c_class = $(this).data('color');
  $('body').removeClass('white blue yellow black').addClass(c_class);
});

もしやりたいことと違っていたらすみません。

Comments

[hiroki88]

説明が分かりやすく勉強になりました。
ありがとうございます。

Answer 2

CSS側で色の定義をクラスで分けておき下記のようなコードでクラスを置き換えてしまうのも手だと思います。

[ターゲット].removeClass('[クラス名]');//クラスを削除
[ターゲット].addClass('[クラス名]');//クラスを追加

Comments

[hiroki88]

jQuery側で短文にする方法を教えていただきありがとうございます。

Answer 3

色が分かりづらいので初期値を換えときました

<script>
$(function(){
  $('#colors').css('background-Color','red');
  $('.color').css('color','green');
  $('.color').on('click',function(){
    var idx=$('.color').index(this);
    switch(idx){
    case 0:
      color="white";
      break;
    case 1:
      color="blue";
      break;
    case 2:
      color="yellow";
      break;
    case 3:
      color="black";
      break;
    }
    $(this).css('color',color);
  });
  //.css('background-Color','red');
});
</script>
<ul id="colors">
<li class="color">白</li>
<li class="color">青</li>
<li class="color">黄</li>
<li class="color">黒</li>
</ul>

Comments

[hiroki88]

switch文で分かりやすくまとめていただいて非常に分かりやすかったです。
ありがとございます。