javascript - 从常量数组中获取标签值
问题描述
我在var x的 ondrop() 中获得了不带 .jpg 扩展名的丢弃项目的图像名称。
在var y中,我想从 item[] 中获取对应的 x 值。
请将 .box002 拖放到框内,共有三个具有值的 .box 类
我计划进行条件检查,以便在必要时进行更改
如何得到它?
如何获得 var 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>
解决方案
有很多方法,但我更喜欢data-*
在这种情况下使用。
如果是这样,您可以为元素添加任何参数。
首先,在randomIndex
设置时穿上你的元素ptags[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;
然后你可以data-*
在 drop 方法中选择它们。
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
推荐阅读
- python - 是否可以从作为参数给出的类继承?
- angular8 - 错误类型错误:无法读取未定义的属性'project_name' - Angular 8
- ruby-on-rails - 使用 CSV.foreach 时如何跳过/忽略格式错误的 CSV?
- scala - 有没有办法通过单个 HList 定义多个隐式证据?
- sequence - 在 Raku 中简洁地打印数学系列
- python - 如何在 VS Code 和 PyCharm 上显示图像?
- r - 如何为 R 中的目标和参与者单独排除异常值
- python - 意外的 id 方法行为
- upload - 如何在量角器中使用 sendKeys() 一次上传一个文件
- html - Bootstrap 4 菜单在移动设备上显示时居中