javascript - 想要在javascript中将值随机索引设置为项目并将相应的图像设置为tempImages
问题描述
如何获取标签以便可以将其设置为ptags以显示在类框内并将当前的项目推送到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 变量,其中包含一个项目并且每个项目都包含一个标签......或者您可以创建一个单独的变量来维护使用的数字列表。
推荐阅读
- clojure - Where do you pass the :ignore-missing-mapping? keyword in reitit swagger to ignore unconvertable schemas?
- python - How would I change a voice channel's bitrate using discord.py?
- wordpress - Elasticsearch & Elasticpress search by math_phrase with & inside query
- go - How to use go echo middleware?
- c++ - How to print the elements of a matrix and of two vectors in the form of a table? Printf C ++
- ios - Detecting current subscriptions Apple IAPs IAP / Detect app deletion - Swift Firebase IOS
- c++ - split the code into header file and main code
- r - Using ggalluvial in R with the ggflags package
- matlab - 取 A(B) 的平均值是什么意思?
- python - 复制带有重复键的字典?