我有一个课程 box2 ,并且 box ,该框包含 array2 中随机选择的值 数组项
的重复项当拖动的元素url与放置的元素标签匹配时,背景色消失。
我给了条件if tempimages==0
,随机选择再次发生。也就是说,当drop位于最后一个元素时。
我的问题是,当跌落到达倒数第二个元素时,在 box 类中发生了元素的随机选择和重新填充
我希望这发生在最后一个盒子上。
如何实现和纠正它?
var items = [{
label: '1:40',
url: 'https://via.placeholder.com/75x75?text=1'
},
{
label: '2:20',
url: 'https://via.placeholder.com/75x75?text=2'
},
{
label: '3:50',
url: 'https://via.placeholder.com/75x75?text=3'
},
{
label: '4:45',
url: 'https://via.placeholder.com/75x75?text=4'
},
{
label: '5:35',
url: 'https://via.placeholder.com/75x75?text=5'
},
{
label: '6:10',
url: 'https://via.placeholder.com/75x75?text=6'
},
{
label: '7:15',
url: 'https://via.placeholder.com/75x75?text=7'
},
{
label: '8:10',
url: 'https://via.placeholder.com/75x75?text=8'
},
{
label: '9:30',
url: 'https://via.placeholder.com/75x75?text=9'
},
{
label: '10:40',
url: 'https://via.placeholder.com/75x75?text=10'
},
{
label: '11:20',
url: 'https://via.placeholder.com/75x75?text=11'
},
{
label: '12:50',
url: 'https://via.placeholder.com/75x75?text=12'
},
{
label: '01:45',
url: 'https://via.placeholder.com/75x75?text=13'
},
{
label: '02:25',
url: 'https://via.placeholder.com/75x75?text=14'
},
{
label: '03:40',
url: 'https://via.placeholder.com/75x75?text=15'
}
]
var tempimages = [];
var array2 = [];
array2 = items.slice();
var len = array2.length;
console.log(len);
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length),
item = array2[randomIndex];
ptags[index].textContent = item.label;
tempimages.push({
data: item,
index: randomIndex
});
ptags[index].dataset.itemIndex = randomIndex;
}
var tlen = tempimages.length;
}
function displayAllImages() {
if (tempimages.length == 0) {
rvalue();
//return;
}
item = tempimages.shift();
image = document.getElementById('slide');
image.src = item.data.url;
image.dataset.itemIndex = item.index;
};
$(function() {
rvalue();
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
console.log(ev.srcElement);
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
//alert(data);
//alert(el);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
// alert("x=>" + x + " y=>" + y);
if (x == y) {
el.parentNode.removeChild;
ev.currentTarget.style.backgroundColor = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
//ev.currentTarget.removeChild(pParagraph);
item = this.item;
var arrayvalue = item.dataindex;
array2.splice(arrayvalue, 1);
displayAllImages();
alert("sucessfull");
if (tempimages.length == 0) {
alert("NO more images");
rvalue();
}
} else {
alert("WRONG PLACE");
}
}
.box {
width: 50px;
height: 50px;
display: inline-block;
border: 2px solid #333;
border-color: #e6e600;
margin: -2px;
background-color: #66cc99;
vertical-align: middle;
}
.box2 {
float: left;
width: 30px;
height: 30px;
float: left;
margin-top: 3%;
padding-top: 2%;
background-color: #ffff00 2px;
border: px solid #000066;
}
.containerr {
margin-top: 5%;
margin-right: 20%;
margin-left: 0%;
border: px solid #FF3399;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="box2" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded" />
</div>
答案 0 :(得分:3)
这是因为在检查代码长度之前, tempimages.shift(); 删除了 displayAllImages();
中的第一个元素。
在 displayAllImages();
之后移动 if(tempimages.length == 0) {...}
即可正常工作。
if (tempimages.length == 0) {
alert("NO more images");
rvalue();
}
displayAllImages();
var items = [{
label: '1:40',
url: 'https://via.placeholder.com/75x75?text=1'
},
{
label: '2:20',
url: 'https://via.placeholder.com/75x75?text=2'
},
{
label: '3:50',
url: 'https://via.placeholder.com/75x75?text=3'
},
{
label: '4:45',
url: 'https://via.placeholder.com/75x75?text=4'
},
{
label: '5:35',
url: 'https://via.placeholder.com/75x75?text=5'
},
{
label: '6:10',
url: 'https://via.placeholder.com/75x75?text=6'
},
{
label: '7:15',
url: 'https://via.placeholder.com/75x75?text=7'
},
{
label: '8:10',
url: 'https://via.placeholder.com/75x75?text=8'
},
{
label: '9:30',
url: 'https://via.placeholder.com/75x75?text=9'
},
{
label: '10:40',
url: 'https://via.placeholder.com/75x75?text=10'
},
{
label: '11:20',
url: 'https://via.placeholder.com/75x75?text=11'
},
{
label: '12:50',
url: 'https://via.placeholder.com/75x75?text=12'
},
{
label: '01:45',
url: 'https://via.placeholder.com/75x75?text=13'
},
{
label: '02:25',
url: 'https://via.placeholder.com/75x75?text=14'
},
{
label: '03:40',
url: 'https://via.placeholder.com/75x75?text=15'
}
]
var tempimages = [];
var array2 = [];
array2 = items.slice();
var len = array2.length;
console.log(len);
var item;
function rvalue() {
//reset background color of box div`s
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor="#66cc99";
}
ptags = document.querySelectorAll('[name="values"]');
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length),
item = array2[randomIndex];
ptags[index].textContent = item.label;
//alert(ptags[index]);
ptags[index].style.visibility = "visible";
tempimages.push({
data: item,
index: randomIndex
});
ptags[index].dataset.itemIndex = randomIndex;
}
var tlen = tempimages.length;
}
function displayAllImages() {
//console.log(tempimages.length)
if (tempimages.length == 0) {
rvalue();
//return;
}
item = tempimages.shift();
image = document.getElementById('slide');
image.src = item.data.url;
image.dataset.itemIndex = item.index;
};
$(function() {
rvalue();
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
// console.log(ev.srcElement);
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
//alert(data);
//alert(el);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
// alert("x=>" + x + " y=>" + y);
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
//ev.currentTarget.removeChild(pParagraph);
pParagraph.style.visibility = "hidden";
item = this.item;
var arrayvalue = item.dataindex;
array2.splice(arrayvalue, 1);
alert("sucessfull");
if (tempimages.length == 0) {
alert("NO more images");
rvalue();
}
displayAllImages();
} else {
alert("WRONG PLACE");
}
}
.box {
width: 50px;
height: 50px;
display: inline-block;
border: 2px solid #333;
border-color: #e6e600;
margin: -2px;
background-color: #66cc99;
vertical-align: middle;
}
.box2 {
float: left;
width: 30px;
height: 30px;
float: left;
margin-top: 3%;
padding-top: 2%;
background-color: #ffff00 2px;
border: px solid #000066;
}
.containerr {
margin-top: 5%;
margin-right: 20%;
margin-left: 0%;
border: px solid #FF3399;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="box2" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded" />
</div>
更新: 代码已更新,可以重置盒子值。