组合if语句

Combining if statements

本文关键字：语句 if 组合      更新时间：2023-09-26

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

拖放操作正常，当#answer1被拖动到正确的div #target 中时，我成功地编写了javascript来提醒

然而，当我复制if语句时，它会提醒Correct，但也会提醒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/

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

一个选项是只检查有图像的目标。这样可以更容易地在游戏中添加或删除目标，而无需更改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!");
    }
}
相关文章：