Рандомное добавление класса при загрузке страницы

Question

Есть блок с 10 новостями на странице. Как можно при загрузке страницы, рандомно добавить класс .active к диву

<div class="status"><span class="online"></span></div>

чтобы получилось вот так

<div class="status"><span class="online active"></span></div>

Чтобы класс .active добавлялся к примеру к первой новости, к четвертой, восьмой

<a href="#" class="product-item-link">
  <div class="product-item">
    <div class="product-item-image">
      <img src="/uploads/posts/2019-12/1576610481_cs1.jpg">
    </div>
    <div class="product-item-desc">
      <div class="product-item-title">Заголово</div>
      <div class="product-item-features">21 августа 2012, Шутер</div>
      <div class="product-item-activation-icon">
        <img src="/templates/Default/images/icons/CS:GO.png">
      </div>
    </div>
    <div class="product-item-seller-price">
      <div class="product-item-seller">
        <div class="product-item-seller__name">
          <div><b>Продавец:</b></div>
          <div class="product-item-seller__name-name"> Roman</div>
        </div><img src="/posts/2020-01/1578428132_fake_taksist.jpg">
        <div class="status"><span class="online"></span></div>
      </div>

      <div class="product-item-price">
        <div class="product-item-price-discount"></div>
        <div class="product-item-price-price">170 ₽</div>
      </div>
    </div>
  </div>
</a>

Нужна помощь в решении на jQuery

Answer 1

Добавление класса на один случайный элемент:

var $elems = $('.status .online');
if( $elems.length ) {
  var index = Math.floor( Math.random() * $elems.length );
  $elems.eq( index ).addClass('active');
}

Math.random() возвращает число от 0 включительно до 1 не включительно. Умножить его на количество элементов, округлить в меньшую сторону. Это будет номером случайного элемента, который можно достать через .eq(index)

...несколько раз в рандомных новостях...

var $elems = $('.status .online');
var nums = getRandNums(3, $elems.length);

console.log(nums);

$elems.each(function(i){
  if( nums.indexOf(i) != -1 ){ /* Номер текущего элемента есть в массиве случайных чисел */
    $(this).addClass('active');
  } 
});

/*****/

function getRandNums(qty, upTo){
  /* возвращает массив случайных чисел от 0 до `upTo` (не включительно), `qty` штук */
  if( qty > upTo ) throw new Error("Количество запрашиваемых чисел больше, чем заданный интервал");
  
  var arr = [];
  for( var i = 0; i < qty; i++ ){
    var index = Math.floor( Math.random() * upTo );
    while( arr.indexOf(index) != -1 ){ /* пока в массиве содержиться это число */
      index = Math.floor( Math.random() * upTo ); /* создать новое */
    }
    arr.push( index );
  }
  
  return arr;
}

.online { display: inline-block; width: 50px; height: 50px; background: #bbb; margin: 2px;}

.online.active {background: orange;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="status">
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
  <div class="online"></div>
</div>

Вообще-то вместо arr.indexOf(index) != -1 сейчас используют arr.includes(index), но последний не поддерживается в IE. По привычке для jQuery использую старый код)

БЛОГ НА HUSL

Рандомное добавление класса при загрузке страницы

Ответы (1 шт):