for 循环仅适用于最后一项

Question

我正在做一个简单的拖放活动，检查所有拖放项目是否都在正确的放置区域中。事情会被打乱，但基本上我正在考虑的方式是每个拖放区检查它是否包含“拖动”+匹配的数组#（即第一个数组项 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;                
            }
    }
}