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

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Рандомное добавление класса при загрузке страницы (https://javascript.ru/forum/jquery/79645-randomnoe-dobavlenie-klassa-pri-zagruzke-stranicy.html)

wwwebtarget

03.03.2020 22:14

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

Есть блок с 10 новостями на странице. Как можно при загрузке страницы, рандомно добавить класс .active к диву чтобы получилось вот так <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

voraa

03.03.2020 22:46

const nmarknews = (Math.round()*10 | 0) + 1; // к-во отмеченных новостей (от 1 до 10) или задать нужное значение
const marknews = [];
while (marknews.length < nmarknews) {
	const n = Math.round()*10 | 0;
	if (! marknews.includes(n) ) marknews.push(n);
}
const spans = document.querySelectorAll('div.status>span.online');
marknews.forEach(n => spans[n].classList.add('active') );

рони	03.03.2020 22:50

voraa,
а без

Цитата:

Сообщение от voraa

! marknews.includes(n)

можешь?:)

wwwebtarget

03.03.2020 22:57

Проверил данный вариант, класс .active добавляется только к первой новости
Подскажите можно ли как то добиться чтобы клас добавлялся несколько раз к разным новостям?

wwwebtarget

03.03.2020 23:01

Цитата:

Сообщение от рони (Сообщение 520900)

voraa,
а без можешь?:)

возможно сможете подсказать решение на jQuery ?

voraa

03.03.2020 23:01

Цитата:

Сообщение от рони (Сообщение 520900)

voraa,
а без можешь?:)

Надо крепко подумать...
Может marknew.indexOf(n)<0 прокатит.

А че? Всякие бабели с includes не справятся?

voraa

03.03.2020 23:02

Цитата:

Сообщение от wwwebtarget (Сообщение 520901)

Всегда только к первой?

wwwebtarget

03.03.2020 23:06

Цитата:

Сообщение от рони (Сообщение 520900)

voraa,
а без можешь?:)

Цитата:

Сообщение от voraa (Сообщение 520904)

Всегда только к первой?

Да, на сайте https://bitly.su/nihniNDv только к первой новости добавляется https://prnt.sc/rb3k9t

рони	03.03.2020 23:09

wwwebtarget,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active {
     background-color: #FF0000;
     color: #FFFFFF;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   $("div.status>span.online").filter(()=> Math.random() < .3).addClass("active");
});
  </script>
</head>
<body>
<div class="status"><span class="online">01</span></div>
<div class="status"><span class="online">02</span></div>
<div class="status"><span class="online">03</span></div>
<div class="status"><span class="online">04</span></div>
<div class="status"><span class="online">05</span></div>
<div class="status"><span class="online">06</span></div>
<div class="status"><span class="online">07</span></div>
<div class="status"><span class="online">08</span></div>
<div class="status"><span class="online">09</span></div>
<div class="status"><span class="online">10</span></div>
</body>
</html>

voraa

03.03.2020 23:10

А куда Вы этот код вставляете?
Его надо после загрузки всей страницы исполнять, или в конце <body> или в обработчике окончания загрузки.

рони	03.03.2020 23:11

voraa,
только один цикл for на всё без проверок на уникальность и без повторов.

wwwebtarget

03.03.2020 23:14

Цитата:

Сообщение от voraa (Сообщение 520907)

вставляю перед закрывающим тегом </body> https://prnt.sc/rb3o84

voraa

03.03.2020 23:14

Есть вероятность, что ни одна новость не будет отмечена.

рони	03.03.2020 23:18

Цитата:

Сообщение от voraa

Есть вероятность, что ни одна новость не будет отмечена.

да, но это очень простой вариант, для примера, к for он не имеет отношения.

voraa

03.03.2020 23:28

Ну random, конечно, а не round

const nmarknews = (Math.random()*10 | 0) + 1; // к-во отмеченных новостей (от 1 до 10) или задать нужное значение
const marknews = [];
while (marknews.length < nmarknews) {
	const n = Math.random()*10 | 0;
	if (! marknews.includes(n) ) marknews.push(n);
}
const spans = document.querySelectorAll('div.status>span.online');
marknews.forEach(n => spans[n].classList.add('active') );

voraa

03.03.2020 23:31

Цитата:

Сообщение от рони (Сообщение 520908)

voraa,
только один цикл for на всё без проверок на уникальность и без повторов.

А есть возможность задать точное кол-во отмечаемых новостей?

wwwebtarget

03.03.2020 23:32

voraa и рони, спасибо большое за помощь. Все получилось :) Огромное благодарен

рони	03.03.2020 23:33

Цитата:

Сообщение от voraa

А есть возможность задать точное кол-во отмечаемых новостей?

да

wwwebtarget

03.03.2020 23:33

Цитата:

Сообщение от voraa (Сообщение 520913)

А есть возможность задать точное кол-во отмечаемых новостей?

о, это мне тоже интересно)

wwwebtarget

03.03.2020 23:34

Цитата:

Сообщение от voraa (Сообщение 520913)

А есть возможность задать точное кол-во отмечаемых новостей?

Цитата:

Сообщение от рони (Сообщение 520915)

да

подскажите данное решение?

рони	03.03.2020 23:35

voraa,
как то так ...

//...
const limit = 3;
  for (let i = 0; i < limit; i++) {
//...
elem.classList.add('active');
}

рони	03.03.2020 23:37

wwwebtarget,
терпение, подождём вариант от voraa,

voraa

03.03.2020 23:53

Я уже дал свой вариант

Цитата:

Сообщение от voraa (Сообщение 520912)

Ну random, конечно, а не round

const nmarknews = (Math.random()*10 | 0) + 1; // к-во отмеченных новостей (от 1 до 10) или задать нужное значение
const marknews = [];
while (marknews.length < nmarknews) {
	const n = Math.random()*10 | 0;
	if (! marknews.includes(n) ) marknews.push(n);
}
const spans = document.querySelectorAll('div.status>span.online');
marknews.forEach(n => spans[n].classList.add('active') );

рони	03.03.2020 23:58

случайный выбор блоков

вариант из двух циклов, без повторов и проверок на уникальность, случайность более "равномерная".

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active {
     background-color: #FF0000;
     color: #FFFFFF;
    }
  </style>

  <script>
document.addEventListener( 'DOMContentLoaded' , () => {
  const arr = [...document.querySelectorAll('div.status>span.online')]
  const limit = 3;
  const {length} = arr;
  for (let i = 0; i < length; i++) {
     const index = Math.floor(Math.random() * length);
     [arr[i], arr[index]]  =  [arr[index], arr[i]];
  };
  arr.length = limit;
  arr.forEach(({classList}) => classList.add('active'));
  });
  </script>
</head>
<body>
<div class="status"><span class="online">01</span></div>
<div class="status"><span class="online">02</span></div>
<div class="status"><span class="online">03</span></div>
<div class="status"><span class="online">04</span></div>
<div class="status"><span class="online">05</span></div>
<div class="status"><span class="online">06</span></div>
<div class="status"><span class="online">07</span></div>
<div class="status"><span class="online">08</span></div>
<div class="status"><span class="online">09</span></div>
<div class="status"><span class="online">10</span></div>
</body>
</html>

рони	03.03.2020 23:59

случайный выбор блоков

один цикл

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active {
     background-color: #FF0000;
     color: #FFFFFF;
    }
  </style>

  <script>
document.addEventListener( 'DOMContentLoaded' , () => {
  const arr = [...document.querySelectorAll('div.status>span.online')]
  const limit = 3;
  for (let i = 0; i < limit; i++) {
     const {length} = arr;
     const index = Math.floor(Math.random() * length);
     const {classList}  = arr.splice(index, 1)[0];
     classList.add('active');
  }
  });
  </script>
</head>
<body>
<div class="status"><span class="online">01</span></div>
<div class="status"><span class="online">02</span></div>
<div class="status"><span class="online">03</span></div>
<div class="status"><span class="online">04</span></div>
<div class="status"><span class="online">05</span></div>
<div class="status"><span class="online">06</span></div>
<div class="status"><span class="online">07</span></div>
<div class="status"><span class="online">08</span></div>
<div class="status"><span class="online">09</span></div>
<div class="status"><span class="online">10</span></div>
</body>
</html>

voraa

04.03.2020 07:50

Цитата:

Сообщение от рони (Сообщение 520921)

вариант из двух циклов,

const arr = [...document.querySelectorAll('div.status>span.onli ne')]

Если это не цикл, то что?

рони	04.03.2020 08:58

Цитата:

Сообщение от voraa

Если это не цикл, то что?

не знаю, можно ли назвать дублирование циклом, это к специалистам. в любом случае с while идут лишние итерации и чем ближе limit к length, тем они более возрастают.

Часовой пояс GMT +3, время: 17:59.