时间戳

首页 > 解决方案 > for 循环仅适用于最后一项

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

问题描述

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

在此先感谢您的帮助！

标签： javascriptarraysfunctionfor-loop

解决方案

做到这一点的方法是假设一切都很好，然后如果你发现一些不好的东西，就改变它。查看我如何更改您的代码以将 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;                
            }
    }
}

推荐阅读