如何获取标签，以便可以将其设置为ptags以显示在类框内并将currusponding项目推送到tempImages []，就像我已经完成的那样。
代码显示Const randItem2，它选择随机标签及其url，不包含数组Items中的重复项
简而言之，如何在没有重复的情况下显示随机选择的值Const randItem2将其标签值设为ptags，将其url设置为其tempImages []，与下面的代码效果相同Const randItem2
有什么方法可以达到这个目的吗？
var tempimages = [];
function rvalue() {
const
items = [
{ label: '1', url: 'https://via.placeholder.com/75x75?text=1' },
{ label: '2', url: 'https://via.placeholder.com/75x75?text=2' },
{ label: '3', url: 'https://via.placeholder.com/75x75?text=3' },
{ label: '4', url: 'https://via.placeholder.com/75x75?text=4' },
{ label: '5', url: 'https://via.placeholder.com/75x75?text=5' },
{ label: '6', url: 'https://via.placeholder.com/75x75?text=6' },
{ label: '7', url: 'https://via.placeholder.com/75x75?text=7' },
{ label: '8', url: 'https://via.placeholder.com/75x75?text=8' },
{ label: '9', url: 'https://via.placeholder.com/75x75?text=9' },
{ label: '10',url: 'https://via.placeholder.com/75x75?text=10' }
],
ptags = document.querySelectorAll('[name="values"]');
var lastnumber=0;
for (let index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() * items.length),
// const randItem2 = Array.from({ length: 3 },() => {const randomIndex = Math.floor(Math.random() * items.length);const [item] = items.splice(randomIndex, 1);return item;
item = items[randomIndex];
ptags[index].textContent = item.label;
tempimages.push(item);
}
}
function displayAllImages() {
if (tempimages.length === 0)
{
return;
}
item = tempimages.shift(),
image = document.getElementById('slide');
image.src = item.url;
};
$(function() {
rvalue();
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
el.parentNode.removeChild;
ev.currentTarget.style.backgroundColor = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
ev.currentTarget.removeChild(pParagraph);
// Show the next image in the slider..
displayAllImages();
}#container {
margin-top:-2%;
white-space:nowrap;
text-align:center;
margin-left:20%;
margin-right:30%;
}
.box {
background-color: coral;
width: 60px;
height:60px;
margin-top:10px;
display:inline-block;
border-radius:5px;
border:2px solid #333;
border-color: #e6e600;
border-radius: 10%;
background-color: #ff00ff;
}
.box002 {
float: left;
width: 50px;
height: 50px;
float: left;
margin-left:30%;
margin-top:-20px;
padding-top:2%;
background-color:#ffff00 2px;
border:2px solid #000066;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
#container {
white-space:nowrap;
text-align:center;
margin-left:20%;
margin-right:30%;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="rvalue()">
<div class="containerr">
<div id="container" style="margin-bottom:10%">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
</div>
</body>为避免重复，您必须继续生成下一个随机数，直到它是唯一的。
您可以使用tempimages变量，其中包含一个项目，每个项目都包含一个标签......或者您可以创建一个单独的变量来维护已使用数字的列表。