0

Нужно чтобы при загрузке страницы, показывало один из div

Пример кода:

<div class="banner">
<a><img src="#"></a>
</div>

<div class="banner">
<a><img src="#"></a>
</div>

<div class="banner">
<a><img src="#"></a>
</div>
1
  • 1
    реализация странная. почему бы не держать один div class="banner" на странице, а средствами php отдавать в него рандомный контент? а будет там 100 баннеров, вы будете все картинки к ним тащить на страницу при каждой загрузке?
    – Kirill
    30 мая 2020 в 23:11

2 ответа 2

2

Решение в лоб:
HTML:

<div id="container">
  <div class="banner">
    <a><img src="#"></a>
  </div>

  <div class="banner">
    <a><img src="#"></a>
  </div>

  <div class="banner">
    <a><img src="#"></a>
  </div>
</div>

JS:

let container = document.getElementById("container");
let children = container.children;

let index = Math.floor(Math.random() * children.length);

for(let i = 0; i < children.length; i++) {
    if(index != i) {
        children[i].style.display= "none";
    }
}
1
  • 1
    let children = document.querySelectorAll("#container .banner"); - есть еще такая штука) 30 мая 2020 в 22:02
1

JS:

$(document).ready(function() {
   const randomNum = Math.floor(Math.random() * 3) + 1;
   const bannerIndex = randomNum - 1;

   const banner = document.getElementsByClassName('banner')[bannerIndex];
   $(banner).addClass('display');
})

CSS:

.banner {
    display: none;
}

.banner.display {
    display: block;
}
1
  • Напрашивается вопрос, зачем тут randomNum, если он создается с +1, только чтобы потом из него вычесть -1... const bannerIndex = Math.floor(Math.random() * 3), нет?) А getElementsByClassName (так понимаю, использован только чтобы взять оттуда один элемент), для этого в jQuery есть метод .eq()$(".banner").eq( bannerIndex ).addClass("display") 30 мая 2020 в 21:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.