【JS ・ CSS】class切り替え

はじめに

結局使うことなくなったけど、今後使う可能性もあるのでclass切り替えについてメモ。
「Bootstrap」の「Glyphicons」を利用しています。

ソースコード

サンプル

<a onclick="changeGlyphicon()"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" id="class_glyphicon_name"></span> さらに詳しく見る</a>

<script type="text/javascript">
  var clickNumber = 0;
  function changeGlyphicon(){
    clickNumber++;
    if((clickNumber%2)==0){        
      document.getElementById("class_glyphicon_name").className="glyphicon glyphicon-chevron-down";
    }else{
      document.getElementById("class_glyphicon_name").className="glyphicon glyphicon-chevron-up";
    }
  }
</script>

説明

今回変更したいのはaタグ内のclass="glyphicon glyphicon-chevron-down"です。
なので、aタグ内にidを指定してあげます。(今回はid="class_glyphicon_name"と指定してます。)

で、本題のJSでは、aタグをクリックするとonclickで指定したchangeGlyphicon()関数が実行されます。
中身としては、用意した初期値0のclickNumber変数をクリックされるごとに1加えていき、２で割ったとき割り切れるか、つまり余りが０か否かで判断しています。

そして、クラス名を変更するのがこちら↓

document.getElementById("指定したいid名").className="切り替えたいclass名";

上記のサンプルで言えば

document.getElementById("class_glyphicon_name").className="glyphicon glyphicon-chevron-up";

の部分です。はい、以上(*´σｰ｀)