javascript如何识别不同的目标?

javascript如何识别不同的目标?,javascript,html,Javascript,Html,我一直在尝试获取六幅图像,根据它们被拖动到的图像来评估正确与否。苹果、番石榴和梨.png在洒到sprite1上时都应该正确,而菠萝、李子和紫色在洒到sprite2上时都应该正确。也就是说,当他们被扔到不正确的雪碧上时,他们的评估也应该是错误的 我遇到的问题是,他们要么评估正确,要么评估错误,这取决于哪个水果先掉到雪碧上。当水果掉到不正确的雪碧上时,它不会识别,我不知道应该添加什么来实现这一点 问题示意图: 逻辑似乎很简单。将answer1添加到target1后,您的代码开始显示正确。你自己尝试过

我一直在尝试获取六幅图像,根据它们被拖动到的图像来评估正确与否。苹果、番石榴和梨.png在洒到sprite1上时都应该正确,而菠萝、李子和紫色在洒到sprite2上时都应该正确。也就是说,当他们被扔到不正确的雪碧上时,他们的评估也应该是错误的

我遇到的问题是,他们要么评估正确,要么评估错误,这取决于哪个水果先掉到雪碧上。当水果掉到不正确的雪碧上时,它不会识别,我不知道应该添加什么来实现这一点

问题示意图:


逻辑似乎很简单。将answer1添加到target1后,您的代码开始显示正确。你自己尝试过解决这个问题吗?我添加了'else if'语句来对'target2'执行检查,但它似乎没有将其识别为一个参数?尝试一下似乎是合乎逻辑的:if$'target1'。查找'answer1',answer2',answer3'。length==1{alertCORRECT!;}else if$'target1'。查找'answer4',answer5','answer6'。长度==1{AlertError.}
<div id="answerBoxes">
<div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite1.png"/>
</div>
<div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite2.png"/>
</div>
</div> <!-- end of sprite's -->
<div id="whatsWhatContent">
<div id="answers">
<div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)">
   <img id="answer1" src="img/apple.png"  draggable="true"    
ondragstart="drag(event)"/></div>

<div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)">
   <img id="answer2" src="img/guava.png"  draggable="true" 
ondragstart="drag(event)"></div>

<div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer3" src="img/pear.png"  draggable="true" 
ondragstart="drag(event)"></div>

  <div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer4" src="img/pineapple.png"  draggable="true" 
ondragstart="drag(event)">

  <div id="answer5Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer5" src="img/plum.png"  draggable="true" 
ondragstart="drag(event)">

  <div id="answer6Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer6" src="img/purple.png"  draggable="true" 
ondragstart="drag(event)">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>

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 if ($('#target2').find('#answer2').length == 1)
{
alert("Wrong.");
}
else {
alert("Wrong!");
}
}