jquery中的图片验证

我是全新的jQuery，我试图在我的项目中制作图片验证有四个图片和四个答案框，当所有图片和答案框匹配时，用户只需在正确的框中排列正确的图片用户“匹配”。我尝试了一些代码，但它不能工作。我的代码在这里。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!'); 
} 
}}); 

});

http://jsfiddle.net/khizar067/2men9/

来源

2013-10-21 khkhizar

** Java！= javascript **。请不要混淆标签。 –

我曾经听说过：Java是为了什么车而来的javascript地毯。 –

图像对象的事件，所以你必须使用（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!'); 
     } 
    } 
});

对象

DEMO

来源

2013-10-21 12:53:48 Anton

jquery中的图片验证

回答

相关问题