从放置时常量数组中获取标签值

Question

我在var x中的 ondrop(( 中获取了没有.jpg扩展名的已删除项目的图像名称。

在var y中，我想从 item[] 中获取 x 值的对应值。

请将 .box002 拖放到框中，有三个具有值的 .box 类

我计划进行条件检查，所以有必要

如何获得它？

如何获得变量 y 值？

var tempimages = [];
function rvalue() {
const items = [  
{ label: '1:40', url: '1.png'  },
{ label: '2:20', url: '2.png'  },
{ label: '3:50', url: '3.png'  },
{ label: '4:45', url: '4.png'  },
{ label: '5:35', url: '5.png'  },
{ label: '6:10', url: '6.png'  },
{ label: '7:15', url: '7.png'  },
{ label: '8:10', url: '8.png'  },
{ label: '9:30', url: '9.png'  }
	   ]
	  
ptags = document.querySelectorAll('[name="values"]');

for (let index = 0; index < 3; index++) 
{
randomIndex = Math.floor(Math.random() * items.length),

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);
alert(data);
alert(el);
var x=document.getElementById("slide").src.split("/").pop().split(".")[0];
alert(x);
var y

//if(x==y)
{
el.parentNode.removeChild; 

ev.currentTarget.style.backgroundColor = 'initial'; 
var pParagraph = ev.currentTarget.firstElementChild;
ev.currentTarget.removeChild(pParagraph);

displayAllImages();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">

<div id="container">

<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:50px; height:50px; border-radius: 50%;" border="rounded"/>

</div>

Answer 1

有很多方法，但在这种情况下我更喜欢使用data-*。
如果是这样，您可以为元素添加任何参数。

首先，在设置元素时randomIndexptags[index].textContent = ~。

ptags[index].dataset.itemIndex = randomIndex;

接下来，在slide元素中执行相同的操作。

// in for loop...
tempimages.push({data:item, index: randomIndex});
// in displayAllImages method
image.src = item.data.url;
image.dataset.itemIndex = item.index;

然后，您可以在 drop 方法中选择这些data-*。

var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;

例如