如何使用脚本更改 Class 中的 data-id 值？

Question

我需要设置随机 data-id 两个值 A y B。我需要一个可以执行此操作的脚本

<div class="demo" data-id="A" />
....
</div>

Answer 1

要存档，您认为您必须执行三个步骤。

首先：将您需要的所有值收集到一个数组中。

var myPossibleValues = ["A","B"];

其二：生成一个随机整数。

基于Generate random number between two numbers in JavaScript

var randNum = Math.round(Math.random() * myPossibleValues.length);

参数myPossibleValues.length允许您用额外的元素扩展数组并将其用作最大范围值。

第三：读取生成的数字，将其应用于数组并将其关联到您的数据属性。

 var videoDiv = document.getElementsByClassName("demo");
     videoDiv[0].setAttribute("data-id",myPossibleValues[randNum]);

由于 getElementsByClassName() returns 是一个数组，[0] 对于第一个匹配的 html 元素是必需的。

Answer 2

是一个很好的解决方案，但由于问题只需要 select 来自两种可能性的值，我不会使事情过于复杂。

const demo = document.querySelector('.demo');
demo.setAttribute('data-id', Math.random() > 0.5 ? 'A' : 'B');

此脚本的作用：

How can I change data-id value in Class with a script?