2017/01/04

jQueryで要素をランダムで表示切替






See the Pen ランダムで表示切替 by takapen (@takapen) on CodePen.
まずは動作サンプルをどうぞ。
何回か再読み込みしてもらうと、aとbがランダムで切り替わっているのがわかるかと思います。



a
b

出しわけたい要素の親要素を用意しています。





$(function(){
  if($('#js-random').length){//要素があるかの判定。大枠の#js-randomがあれば以下が実行される。

   var numRandom = Math.floor(Math.random()*100);//ランダムの数字0から99のいずれかを生成。

   if((numRandom >= 0) && (bnrRandom <= 49)) {//0から49だった場合
      $('#js-random--a').css('display', 'block');
      $('#js-random--b').css('display', 'none');
   } else if ((numRandom >= 50) && (numRandom < 100)) {//50から99だった場合
     $('#js-random--a').css('display', 'none');
      $('#js-random--b').css('display', 'block');
    }

  }
});