将随机位置的唯一类添加到具有相同类的 div

Question

我需要所有具有“nprotagonistas__bg”类的 div，只有一个随机添加“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

我不太明白你真正想要什么，但是，这里有一个解决方案可以在页面加载时完成你的任务。

因此，当页面加载时，我们获取所有包含nprotagonistas__bg 类的divs，然后随机将hover 类分配给divs 之一。这将根据包含nprotagonistas__bg 类的divs 的number 来完成，我们将使用内置的random 方法来获取一个随机数，该随机数将用作所选div 的索引（随机数是div 页面上的索引，该索引被选择用于获取hover 类，因此重新加载页面以获取另一个随机div 结束。

说了这么多，这里有一个sn-p来说明：

在 sn-p 中，hoverclass 将红色的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>

Learn more 关于random 方法。

Learn more 关于ceil 方法。

Learn more 关于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类添加到相应的元素中