【jQurey】ページ読み込みで、画像ランダム表示

ページを読み込みで、画像をランダム表示させるものを作ったので、備忘録として記載します。

htmlは下記通り。

<div class="js-random">
  <p data-group="bnr1" data-num="1"><a href="/"><img src="/img/banner_g1_b1.png" alt=""></a></p>
  <p data-group="bnr1" data-num="2"><a href="/"><img src="/img/banner_g1_b2.png" alt=""></a></p>
  <p data-group="bnr1" data-num="3"><a href="/"><img src="/img/banner_g1_b3.png" alt=""></a></p>
  <p data-group="bnr1" data-num="4"><a href="/"><img src="/img/banner_g1_b4.png" alt=""></a></p>
</div>

<div class="js-random">
  <p data-group="bnr2" data-num="1"><a href="/"><img src="/img/banner_g2_b1.png" alt=""></a></p>
  <p data-group="bnr2" data-num="2"><a href="/"><img src="/img/banner_g2_b2.png" alt=""></a></p>
  <p data-group="bnr2" data-num="3"><a href="/"><img src="/img/banner_g2_b3.png" alt=""></a></p>
  <p data-group="bnr2" data-num="4"><a href="/"><img src="/img/banner_g2_b4.png" alt=""></a></p>
</div>

仕様としては下記の通り。

• data-group="" が同じもののうちで、一つをランダム表示。

• is-active がつくことで、cssで display: block; に。
  （初期表示は display: none: で。）

• 同じdata-group=""で、data-num="" が幾つあるのか数え、ランダムで一つを決定。

• js-randam の塊はいくつあっても動作すること。

$(function () {
  var bnr_group = $('.js-random').length;
  var data_group = '';
  var data_group_num_exist = '';
  var group_value = '';

  //js-random がページ内にいくつあるか。無ければ-1が返る。
  if (bnr_group > 0) {
    for (var i = 1; i <= bnr_group; i++) {

      //js-randam の塊を上から順に見ていく。
      //その js-randam の塊の中の、一番上の子要素に、どんな data-group の値があるか。
      group_value = $('.js-random').eq(i - 1).children().eq(0).data('group');
      data_group = '[data-group="' + group_value + '"]';

      //一致する data-group="●●" がいくつあるか。
      //つまり、data-num="●●" が連番幾つまで用意されいるのか。
      data_group_num_exist = $(data_group).length;
      groupRandomBnr(data_group, data_group_num_exist);
    }
  }


  function groupRandomBnr(group, group_num) {
    //ランダムで、data-num="●●"を指定。
    var max_num = group_num + 1;
    //最低1から最大●●の中でランダム数値を生成。
    var random_num = Math.floor(Math.random() * (max_num - 1)) + 1;
    var data_num = '[data-num="' + random_num + '"]';

    //指定の data-group="●●"、指定の data-num="●●" を持つ要素タグに is-active をつける。
    $(group + data_num).addClass('is-active');
  }
});

■参照

ランダム数値の生成については以下参照。
https://lab.syncer.jp/Web/JavaScript/Snippet/15/