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中的圖片驗證

回答

相關問題