Question

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

拖放工作正常，我已设法编码javascript，以便在#answer1被拖入正确的div #target

时提醒

然而，当我复制if语句时，它会提示Correct，但后来也提示错误，我怀疑这是第二个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/

Answer 1

正如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!";
     }
}

Answer 2

一种选择是仅检查放在其上的图像的目标。这样，您就可以更轻松地在游戏中添加或删除目标，而无需更改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!");
    }
}

结合if语句

2 个答案: