Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2020, 22:14
Новичок на форуме
Отправить личное сообщение для wwwebtarget Посмотреть профиль Найти все сообщения от wwwebtarget
 
Регистрация: 03.03.2020
Сообщений: 8

Рандомное добавление класса при загрузке страницы
Есть блок с 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
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2020, 22:46
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 730

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') );
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2020, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,294

voraa,
а без
Сообщение от voraa
! marknews.includes(n)
можешь?
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2020, 22:57
Новичок на форуме
Отправить личное сообщение для wwwebtarget Посмотреть профиль Найти все сообщения от wwwebtarget
 
Регистрация: 03.03.2020
Сообщений: 8

Проверил данный вариант, класс .active добавляется только к первой новости
Подскажите можно ли как то добиться чтобы клас добавлялся несколько раз к разным новостям?
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2020, 23:01
Новичок на форуме
Отправить личное сообщение для wwwebtarget Посмотреть профиль Найти все сообщения от wwwebtarget
 
Регистрация: 03.03.2020
Сообщений: 8

Сообщение от рони Посмотреть сообщение
voraa,
а без можешь?
возможно сможете подсказать решение на jQuery ?
Ответить с цитированием
  #6 (permalink)  
Старый 03.03.2020, 23:01
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 730

Сообщение от рони Посмотреть сообщение
voraa,
а без можешь?
Надо крепко подумать...
Может marknew.indexOf(n)<0 прокатит.

А че? Всякие бабели с includes не справятся?
Ответить с цитированием
  #7 (permalink)  
Старый 03.03.2020, 23:02
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 730

Сообщение от wwwebtarget Посмотреть сообщение
Проверил данный вариант, класс .active добавляется только к первой новости
Подскажите можно ли как то добиться чтобы клас добавлялся несколько раз к разным новостям?
Всегда только к первой?
Ответить с цитированием
  #8 (permalink)  
Старый 03.03.2020, 23:06
Новичок на форуме
Отправить личное сообщение для wwwebtarget Посмотреть профиль Найти все сообщения от wwwebtarget
 
Регистрация: 03.03.2020
Сообщений: 8

Сообщение от рони Посмотреть сообщение
voraa,
а без можешь?
Сообщение от voraa Посмотреть сообщение
Всегда только к первой?
Да, на сайте https://bitly.su/nihniNDv только к первой новости добавляется https://prnt.sc/rb3k9t
Ответить с цитированием
  #9 (permalink)  
Старый 03.03.2020, 23:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,294

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>
Ответить с цитированием
  #10 (permalink)  
Старый 03.03.2020, 23:10
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 730

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Gtranslate.io перевод при загрузке страницы Ops Общие вопросы Javascript 2 30.11.2016 17:36
Прокрутка окна при загрузке страницы dexteron Общие вопросы Javascript 5 09.04.2015 20:08
Автосролл при загрузке страницы gam0ra Общие вопросы Javascript 11 27.02.2015 13:49
Отправка формы при загрузке страницы Shimmy AJAX и COMET 7 26.11.2013 13:51
Автозапуск скрипта при загрузке страницы HepoH Javascript под браузер 3 31.03.2012 22:27