从数组中随机加载到类中获取值

Question

我有一个包含十八个值的array arr[]，我有六个类，段落 p 带有 id 值

我需要从arr[]中随机获取六个值并显示代替"x"。

我怎样才能实现它？

<script>
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
arrayLength = arrayVariable.length;
for (i = 0; i < arrayLength; i++) {

}
</script>

.ab {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 10%;
background-color: #42e0fd;
font: "Courier New", Courier, monospace;
font: 70px;
;
color: #FFFFFF;
font-size: xx-small;
font-weight: 900;
text-align: center;
}

<div class="ab"><p id="values">x </p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>

Answer 1

这些应该是唯一的吗？ 如果是：

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
places.forEach(function (place) {
var index = Math.floor(Math.random() * arrayVariable.length)
place.innerText = arrayVariable[index]
arrayVariable.splice(index, 1)
})

Answer 2

请在文档中保持您的ID唯一。在此处查看 w3org 文档

您可以将 name 属性用于<p>标签作为<p name="values">x</p>

然后使用以下 JS 来实现您的结果。

检查 JS 小提琴

var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
arrayLength = arrayVariable.length;

ptags = document.getElementsByName("values");
for(i=0;i<ptags.length;i++){
ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
}

Answer 3

我正在复制初始数组，然后对于要在其上插入数组随机元素的每个 DOM 元素，我从临时数组中选取一个元素，然后将其插入 DOM 中。为了使数据唯一，我从临时数组中删除了选取的数据。

const arrayVariable = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen'];
// Get random number
function getRandom(max) {
return Math.floor(Math.random() * 10);
};
// Select a random value from the initial array
function getRandomFromArray(array) {
const random = getRandom(array.length - 1);
const value = array[random];
array.splice(random, 1);
return value;
}
const tmp = [
...arrayVariable,
];
// Treat each bloc
$('.ab').each(function() {
const value = getRandomFromArray(tmp);
$(this).html(value);
});

.ab {
float: left;
width: 10em;
height: 10em;
border: 1px solid black;
border-radius: 10%;
background-color: #42e0fd;
font: "Courier New", Courier, monospace;
font: 70px;
color: #FFFFFF;
font-weight: 900;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab">
<p id="values">x </p>
</div>
<div class="ab">
<p id="values"> x</p>
</div>
<div class="ab">
<p id="values"> x</p>
</div>
<div class="ab">
<p id="values"> x</p>
</div>
<div class="ab">
<p id="values"> x</p>
</div>
<div class="ab">
<p id="values"> x</p>
</div>

Answer 4

您只需洗牌数组，然后连续获得数组的六个值。

函数洗牌：

/**
* Shuffles array in place.
* @param {Array} a items An array containing the items.
*/
function shuffle(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}

实现：

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
shuffle(arrayVariable);
places.forEach(function (place) {
place.innerText = arrayVariable.pop();
})

参考：数组随机播放