добавить уникальный класс в случайном положении в div с тем же классом

Question

Мне нужны все div с классом "nprotagonistas__bg", только один случайным образом добавляет класс "hover".

<div class="nprotas">
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg grey">
                </div>
                <div class="nprotagonistas__content lectores">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg white">
                </div>
                <div class="nprotagonistas__content controladores">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg black">
                </div>
                <div class="nprotagonistas__content videointercomunicacion">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg red">
                </div>
                <div class="nprotagonistas__content aplicacion">
                </div>
            </div>
        </div>
    </div>
</div>

То есть только один из классов "nprotagonistas__bg" имеетиметь класс "зависания" в случайном порядке.

Answer 1

Я не совсем понял, что вы действительно хотите, но вот решение для достижения вашей задачи при загрузке страницы.

Итак, когда страница загружена, мы получаем все divs, содержащие класс nprotagonistas__bg, а затем случайным образом назначим класс hover только одному из div s.Это будет сделано в зависимости от числа из div с классом nprotagonistas__bg, и мы будем использовать встроенный метод random, чтобы получить случайное число, которое будет использоваться в качестве индексавыбранного div (случайное число - это индекс на странице div, выбранной для получения класса hover, поэтому перезагрузка страницы заканчивается получением еще одного случайного div).

* 1017С учетом всего сказанного ниже приведен фрагмент кода:

В этом фрагменте класс hover добавляет красный background к элементу, который имеет этот класс.

// waiting till the page is loaded by listening to the 'load' event on the 'window' object.
window.addEventListener('load', function() {
  /**
  * fetch all the divs with the class 'nprotagonistas__bg'.
  * getting the number of these divs on the page(how many div is there).
  * using the 'random' method we'll get a random number that is >= 0 and <= the number of the divs.
  **/
  var divs = document.querySelectorAll('div.nprotagonistas__bg'),
      l = divs.length,
      r = Math.ceil(Math.random() * l) - 1;
  // assign the 'hover' class to a div depending on thethe random number.
  divs[r].classList.add('hover');
});

.nprotagonistas__bg {
  /* just to make the divs visible on the page */
  height: 50px;
  border: 2px solid green;
}
.nprotagonistas__bg.hover{
  background: red;
}

<div class="nprotas">
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg grey">
                </div>
                <div class="nprotagonistas__content lectores">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg white">
                </div>
                <div class="nprotagonistas__content controladores">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg black">
                </div>
                <div class="nprotagonistas__content videointercomunicacion">
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="nprotagonistas">
                <div class="nprotagonistas__bg red">
                </div>
                <div class="nprotagonistas__content aplicacion">
                </div>
            </div>
        </div>
    </div>
</div>

Подробнее о методе random.

Подробнее о методе ceil.

Подробнее о методе addEventListener.

Надеюсь, я подтолкнул вас дальше.

Answer 2

document.addEventListener('DOMContentLoaded', function(){
    var elements = document.querySelectorAll(".nprotagonistas__bg");
    var numberOfElements = elements.length;
    var randomIndex =  Math.floor(Math.random()*numberOfElements) + 1;

    var current = elements[randomIndex];
    current.classList.add('hover');
    /* console.log('test'); */

});

Вы можете улучшить его, запустив его, когда на вашем веб-сайте произошло какое-то событие, например, щелчок, наведение мыши и т. Д. И т. Д.

и чтобы быть уверенным, что .hoverкласс находится только на одном элементе после того, как событие инициируется, потому что это событие может запускаться много раз

, например, событие щелчка на теле, в обработчике события вы выбираете все .nprotagonistas_bg и удаляете hover

var elements = document.querySelectorAll(".nprotagonistas__bg");
elements.foreEach(function(element){
    element.classList.remove('hover')
});

, после чего вы можете снова сгенерировать randomIndex и добавить класс hover к соответствующему элементу