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

$post = [
    'grant_type' => 'authorization_code',
    'code' => 'xxxxxx',
    'client_id'   => 'xxxxx',
    'client_secret'   => 'xxxx',
    'redirect_uri' => 'https://sample/mybots/blockchain',
];

$ch = curl_init('https://api.coinbase.com/oauth/token');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);

// execute!
$response = curl_exec($ch);

// close the connection, release resources used
curl_close($ch);

// do anything you want with your response
var_dump($response)

您可以通过在网站上发生某些事件（例如单击，鼠标悬停等等）时触发它来改进它。

并确保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'); */ });类仅在事件触发后才在一个元素上，因为该事件可以被触发多次

例如，主体上的click事件，请在事件处理程序中选择所有.hover并删除.nprotagonistas_bg

hover

之后，您可以再次生成一个randomIndex并将var elements = document.querySelectorAll(".nprotagonistas__bg"); elements.foreEach(function(element){ element.classList.remove('hover') });类添加到相应的元素

Answer 2

我不太了解您真正想要的是什么，但是，这是一种在页面加载时完成任务的解决方案。

因此，在加载页面时，我们提取所有包含类div的{{1}}，然后随机地将类nprotagonistas__bg分配给{{ 1}} s。这将取决于包含类hover的{{1}}的 number 个，我们将使用内置的div方法来获取随机数将用作所选div的索引（随机数是nprotagonistas__bg的页面上为获取random类而选择的索引，因此重新加载页面的结尾为得到另一个随机div）。

话虽如此，下面是一个片段说明：

在代码段中，div类向具有该类的元素添加红色hover。

div

hover

background

Learn more关于// 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'); });方法。

Learn more关于.nprotagonistas__bg { /* just to make the divs visible on the page */ height: 50px; border: 2px solid green; } .nprotagonistas__bg.hover{ background: red; }方法。

Learn more关于<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>方法。

希望我进一步推动了你。

将唯一类别随同类别随机添加到div

2 个答案: