我是jQuery的新手,我正在尝试在我的项目中进行图像验证,有四个图像和四个答案框,当所有图像和答案框都匹配用户“匹配”时,用户只需在正确的框中排列正确的图像。我尝试了一些代码,但它无法正常工作。我的代码在这里。
<img id="ans1" src="icon/folder.png" />
<img id="ans2" src="icon/magnifier.png" />
<img id="ans3" src="icon/recycle.png" />
<img id="ans4" src="icon/trash_empty.png" />
<div id="answer1"></div>
<div id="answer2"></div>
<div id="answer3"></div>
<div id="answer4"></div>
<script type="text/javascript">
$('img').draggable({ containment: 'document', revert: true, drag: function(){
var image = $(this).attr('id');
}});
$(document).ready(function() {
$('div').droppable({containment: 'parent', drop: function(image){
var answer = $(this).attr('id');
if(answer=='answer1' && image=='ans1'){
alert('Image match.');
}else{
alert('Condition not working!');
}
}});
});
答案 0 :(得分:1)
图像对象是事件,因此您必须使用(ev,ui)来获取要拖动的对象,ui.draggable是您要拖动的对象
$('div').droppable({
containment: 'parent',
drop: function (ev, ui) {
// ^^
console.log(ui.draggable);
var answer = $(this).attr('id');
if (answer == 'answer1' && ui.draggable[0].id == 'ans1') {
// ^^^^^^^^^^^^^^^^^^
alert('Image match.');
} else {
alert('Condition not working!');
}
}
});