结合if语句

时间:2013-06-21 15:34:17

标签: javascript jquery html html5

我正在制作一个简单的HTML5& 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/

2 个答案:

答案 0 :(得分: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!";
     }
}

答案 1 :(得分: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!");
    }
}