如何遍历每个div并检查是否包含某些元素？

Question

我正在构建拖放益智游戏，我想知道如何检查我所有的可放置div是否包含拖动的图像。

我想输入一个if语句，例如：

if (all of my "box2" divs are filled with draggable "images") { 
  alert('Everything is cool')
} else {
  alert('Not cool')
}

我的代码到目前为止：

 var dropTarget = document.querySelector(".wrapper"); var draggables = document.querySelectorAll(".task"); let imgId = []; let targetId = []; for (let i = 0; i < draggables.length; i++) { draggables[i].addEventListener("dragstart", function (ev) { ev.dataTransfer.setData("srcId", ev.target.id); }); } dropTarget.addEventListener('dragover', function (ev) { ev.preventDefault(); imgId = ev.target.id.split("_"); }); dropTarget.addEventListener('drop', function (ev) { ev.preventDefault(); let target = ev.target; let droppable = target.classList.contains('box2'); let srcId = ev.dataTransfer.getData("srcId"); targetId = ev.target.id.split("_"); if (droppable) { ev.target.appendChild(document.getElementById(srcId)); } if (targetId[1] != srcId.split("_")[1]) { document.getElementById("text").style.border = "thick solid red"; } }); 

 <div class="wrapper"> <div style="float:left;" id="box"> <img class="task" id="img_1" src="img/puzz1.jpg" alt="" draggable="true" ondragstart="drag(event)"> <img class="task" id="img_2" src="img/puzz2.jpg" alt="" draggable="true" ondragstart="drag(event)"> <img class="task" id="img_3" src="img/puzz3.jpg" alt="" draggable="true" ondragstart="drag(event)"> <img class="task" id="img_4" src="img/puzz4.jpg" alt="" draggable="true" ondragstart="drag(event)"> </div> <div class="box2" style="float: right" id="text"> <div id="drop_1" class="box2"></div> <div id="drop_2" class="box2"></div> <div id="drop_3" class="box2"></div> <div id="drop_4" class="box2"></div> </div> </div> 

Answer 1

我修复了上面的示例，使其起作用，并在每次放置后添加了警报，提示是否所有放置区都已填充图像。 后者的逻辑全部包含在areAllDropsFilled函数内。 片段：

 var dropTarget = document.querySelector("#drops"); var draggables = document.querySelectorAll(".task"); let imgId = []; let targetId = []; for (let i = 0; i < draggables.length; i++) { draggables[i].addEventListener("dragstart", function (ev) { ev.dataTransfer.setData("srcId", ev.target.id); }); } dropTarget.addEventListener('dragover', function (ev) { ev.preventDefault(); imgId = ev.target.id.split("_"); }); dropTarget.addEventListener('drop', function (ev) { ev.preventDefault(); let target = ev.target; let droppable = target.classList.contains('box2'); let srcId = ev.dataTransfer.getData("srcId"); targetId = ev.target.id.split("_"); if (droppable) { ev.target.appendChild(document.getElementById(srcId)); } if (targetId[1] != srcId.split("_")[1]) { document.getElementById("drops").style.border = "thick solid red"; } if(areAllDropsFilled()) { alert('you finished!'); } else { alert('not yet done'); } }); function areAllDropsFilled() { return [].slice.call(document.querySelectorAll('.box2')).every(box => box.childNodes.length > 0); } 

 #drops { display: inline-block; } .box2 { width: 200px; height: 200px; border: 1px solid black; display: inline-block; box-sizing: border-box; } 

 <div id="tasks"> <img class="task" id="img_1" src="https://source.unsplash.com/random/200x200?1" draggable="true"> <img class="task" id="img_2" src="https://source.unsplash.com/random/200x200?2" draggable="true"> <img class="task" id="img_3" src="https://source.unsplash.com/random/200x200?3" draggable="true"> </div> <div id="drops"> <div id="drop_1" class="box2"></div> <div id="drop_2" class="box2"></div> <div id="drop_3" class="box2"></div> </div>