0

我正在制作一个简单的 HTML5 和 Javascript 拖放游戏，用户应该将 div 内的图像拖动到空 div 中。

拖放工作正常，我已经成功编写了 javascript 代码，以便在#answer1拖入正确的 div 时发出警报，#target

但是，当我复制 if 语句时，它会警告正确但也会警告不正确，我怀疑这是第二个 if 语句直接运行。

有什么方法可以将语句分开，使其仅在拖动图像时运行，而不是运行所有 if 语句？

function allowDrop(ev){
   ev.preventDefault();
}

function drag(ev){
   ev.dataTransfer.setData("content", ev.target.id);
}

function drop(ev){
   ev.preventDefault();
   var image = ev.dataTransfer.getData("content");
   ev.target.appendChild(document.getElementById(image));

  if($('#target1').find('#answer1').length == 1)
  {
    alert("CORRECT!");
  } else {
    alert("Wrong!");
  }

  if($('#target2').find('#answer2').length == 1)
  {
    alert("CORRECT!");
  } else {
    alert("Wrong!");
  }
}

JSFiddle 对于完整的网页：

http://jsfiddle.net/hgDFU/1/

4

2 回答 2

2

正如 Ghillied 在评论中所说，这将是更好的做法：

function drop(ev){
   ev.preventDefault();
   var image = ev.dataTransfer.getData("content");
   ev.target.appendChild(document.getElementById(image));

   alert(checkDrop());
}

function checkDrop() {

     if($('#target1').find('#answer1').length == 1){
        return "CORRECT!";
     } 
     else if($('#target2').find('#answer2').length == 1) {
        return "CORRECT!";
     }
     else {
       return "Wrong!";
     }
}
于 2013-06-21T15:42:00.420 回答
1

一种选择是仅检查已将图像拖放到其上的目标。这使得在您的游戏中添加或删除目标变得更加容易，而无需更改drop().

function drop(ev) {
    ev.preventDefault();
    var image = ev.dataTransfer.getData("content");
    ev.target.appendChild(document.getElementById(image));

    var targetnum = ev.target.id.replace("target", "");
    if($('#target' + targetnum).find('#answer' + targetnum).length == 1)
    {
        alert("CORRECT!");
    } else {
        alert("Wrong!");
    }
}
于 2013-06-21T15:48:50.470 回答