0

私は単純な HTML5 と Javascript のドラッグ アンド ドロップ ゲームを作成しています。これにより、ユーザーは div 内の画像をドラッグして空の div に配置する必要があります。

ドラッグ アンド ドロップは正しく機能#answer1し、正しい div にドラッグされたときに警告するように JavaScript をコーディングすることができました。#target

ただし、ifステートメントを複製すると、正しいアラートが表示されますが、正しくないアラートも表示されます。これは、直後に実行されている2番目の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 完全な Web ページの場合:

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

4

2 に答える 2

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!");
    }
}
于 2013-06-21T15:48:50.470 に答える