게임이 끝나면 jquery 알림을 어떻게받을 수 있습니까?

Question

이 코드는 드래그 앤 드롭 게임용입니다. 현재 각기 다른 조각을 대상으로 끌면 경고 ("correct")가 나타납니다. 얼마나 많은 말이 맞았는지 경고가 끝날 때 한 번만 나타나도록하려면 어떻게 변경합니까?

html로 :

<img class="drag-me" id="drag1" src="images/drag1.png"> 
<img class="drag-me" id="drag2" src="images/drag2.png"> 
<img class="drag-me" id="drag3" src="images/drag3.png"> 
<img class="drag-me" id="drag4" src="images/drag4.png"> 

<img class="target" id="target1" src="images/target1.png"> 
<img class="target" id="target2" src="images/target2.png"> 
<img class="target" id="target3" src="images/target3.png"> 
<img class="target" id="target4" src="images/target4.png"> 

JQuery와 :

$('.drag-me').draggable({revert:"invalid", snap:".target"}); 
$('.target').droppable({ 
    drop: function(event, ui) { 
     itemsInPosition++; 
     // get id of draggable and droppable id 
     var draggableID = $(ui.draggable).attr("id"); 
     var droppableID = $(this).attr("id"); 
     if(draggableID[4]==droppableID[6]){ 
     alert("correct") 
    testIfComplete(); 
     totalCorrect++; 
     } 
    } 
}); 

var itemsInPosition = 0; 
var totalItems = 4; 
var totalCorrect = 0; 

function testIfComplete(){ 
if(itemsInPosition==totalItems){ 
alert("You got " + totalCorrect + " right") 
    } 
} 

감사합니다!

Answer 1

jquery UI에 적합한 라이브러리 JS + CSS를 선택해야합니다.

바이올을 참조하십시오. 그것은 작동합니다. http://jsfiddle.net/abdennour/67SrS/

var itemsInPosition = 0; 
var totalItems = 4; 
var totalCorrect = 0; 
$('.drag-me').draggable({revert:"invalid", snap:".target"}); 
$('.target').droppable({ 
    drop: function(event, ui) { 
     itemsInPosition++; 
     // get id of draggable and droppable id 
     var draggableID = $(ui.draggable).attr("id"); 
     var droppableID = $(this).attr("id"); 
     if(draggableID[4]==droppableID[6]){ 
     alert("correct") 
    testIfComplete(); 
     totalCorrect++; 
     } 
    } 
}); 

당신은 & 결론이 바이올린에서 suitables에게 라이브러리를 다운로드 할 수 있습니다

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css