css 我如何在我的网站上暴露随机元素[重复]

iszxjhcz 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(176)

- 此问题在此处已有答案**：

Best way to get child nodes（5个答案）
Getting a random value from a JavaScript array（28个答案）
6小时前关门了。
我通过Javascript添加了EventListener，我想在按键后选择1个元素，然后我想将该元素的不透明度更改为1
我尝试从1 - 9生成随机数，并检查它们是否与元素id相同，但没有成功。

function animate() {

}

document.addEventListener("keydown", function() {
  animate()
});

<div class="celok">
  <div id="1" class="box">Text</div>
  <div id="b" class="box">Text </div>
  <div id="c" class="box">text</div>
  <div id="d" class="box">Text</div>
  <div id="e" class="box">Text</div>
  <div id="f" class="box">Text</div>
  <div id="g" class="box">Text</div>
  <div id="h" class="box">Text</div>
  <div id="i" class="box">Text</div>
</div>

css

来源：https://stackoverflow.com/questions/75298776/how-do-i-expose-random-element-on-my-website

1条答案

按热度按时间

uqzxnwby1#

您可以使用querySelectorAll来获取所有不可见的元素（使用一个类）。
然后对该数组执行get a random index操作，并对其应用visible类以在DOM中显示它

function animate() {
    const all = document.querySelectorAll('.box:not(.visible)');
    if (all.length) {
        const rnd = Math.floor(Math.random() * all.length);
        all[rnd].classList.toggle('visible');
    }
}

document.addEventListener("keydown", function() {
  animate()
});

.visible {
    opacity:1 !important;
}

.box {
    opacity: 0;
}

<div class="celok">
  <div id="1" class="box">Text</div>
  <div id="b" class="box">Text </div>
  <div id="c" class="box">Text</div>
  <div id="d" class="box">Text</div>
  <div id="e" class="box">Text</div>
  <div id="f" class="box">Text</div>
  <div id="g" class="box">Text</div>
  <div id="h" class="box">Text</div>
  <div id="i" class="box">Text</div>
</div>

赞(0）回复(0）举报 2023-02-01

我来回答

css 我如何在我的网站上暴露随机元素[重复]

1条答案

相关问题

热门标签

最新问答