1

私はjQueryがまったく初めてで、プロジェクトで画像検証を作成しようとしています.4つの画像と4つの回答ボックスがあります.すべての画像と回答ボックスがユーザーの「一致」と一致する場合、ユーザーは正しい画像を正しいボックスに配置するだけです. いくつかのコードを試しましたが、うまくいきませんでした。私のコードはここにあります。

<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/

4

1 に答える 1

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!');
        }
    }
});

デモ

于 2013-10-21T12:53:48.330 に答える