javascript - for 循环仅适用于最后一项

Question

我正在开发一个简单的拖放事件，用于检查所有拖动项目是否位于正确的放置区域中。事情会被打乱，但本质上我正在考虑这样做的方式是每个放置区域检查它是否包含“drag”+匹配的数组#(即第一个数组项drag0位于第一个数组项[0]内)拖放区)。

但是，它仅适用于最后一项(您只要正确地完成最后一项，就会得到正确的响应)。我已经看到了将其包装在函数中或使用 throw/catch 的选项，但似乎没有任何效果。

item 类是可拖动项目，dropzone 是可放置区域的类。

function seeResult() {
  var result = document.getElementById("result");
  var drags = document.getElementsByClassName("item");
  var drops = document.getElementsByClassName("dropzone");
  var i;
  for (i = 0; i < drops.length; i++) {
    var num = i;
    if (drops[i].innerHTML.indexOf("drag" + num)) {
      result.style.color = "green";
    } else {
      result.style.color = "red";
    }
  }
};

<div class="item" draggable="true" ondragstart="drag(event)" id="drag0">Drag Item 1</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag1">Drag Item 2</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag2">Drag Item 3</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag3">Drag Item 4</div>

<div id="dropZones">
  <div id="dropZone1" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 1</p>
    </div>
  </div>
  <div id="dropZone2" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 2</p>
    </div>
  </div>
  <div id="dropZone3" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 3</p>
    </div>
  </div>
  <div id="dropZone4" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 4</p>
    </div>
  </div>
</div>

<div id="seeResult" onclick="seeResult()">See result!</div>
<div id="result">Result</div>

最后一点是，这将被添加到一个网站中，内容创建者可以在其中添加/删除他们想要的任意数量的拖/放项目，然后将其吐给最终用户，因此事情必须相当动态，可以不只是使用这 4 个特定的数组项。

预先感谢您的帮助!

Answer 1

做到这一点的方法是一开始就假设一切都很好，然后如果你发现有什么不好，就改变它。了解我如何更改您的代码以将 result.style.color 最初设置为绿色，然后如果您发现一个不正确的元素，它将其设置为红色并返回。

function seeResult() {
    var result = document.getElementById("result");
    result.style.color = "green";
    var drags = document.getElementsByClassName("item");
    var drops = document.getElementsByClassName("dropzone");
    var i;
    for (i = 0; i < drops.length; i++){
        var num = i;
            if(drops[i].innerHTML.indexOf("drag"+num) == -1){
              result.style.color = "red";
              return;                
            }
    }
}