我正在为客户制作一个拖放匹配游戏。
问题 1:当所有图像都与文字匹配后,如何才能显示一个弹出窗口,显示“游戏结束”或类似内容?
问题 2:图像与其文字匹配后,是否可以使图像和文字同时淡出 View (这样页面就不会被已匹配的图像弄乱)?
这是我的 JavaScript:
$("#bottle, #butterfly").draggable({ revert: "invalid", containment: "#wrapper"});
$("#bottleDrop").droppable({
accept: "#bottle",
drop: function(event, ui) {
if(ui.draggable.is("#bottle")){
$(this).addClass("correct").find("p").html("correct!");
}
}
});
$("#butterflyDrop").droppable({
accept: "#butterfly",
drop: function(event, ui) {
if(ui.draggable.is("#butterfly")){
$(this).addClass("correct").find("p").html("correct!");
}
}
});
最佳答案
这是一种实现方法:
var done = true;
$("#bottle, #butterfly").draggable({
revert: "invalid", containment: "#wrapper",
start: function(event, ui){
if(!done)
return false;
},
stop: function(event, ui){
if($(".correct").length == $(".drop").length){
setTimeout(function(){
alert('All items have been matched!');
},2000);
}
}
});
$("#bottleDrop").droppable({
accept: "#bottle",
drop: function(event, ui) {
if(ui.draggable.is("#bottle")){
$(this).addClass("correct").find("p").html("correct!");
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000);
}
}
});
$("#butterflyDrop").droppable({
accept: "#butterfly",
drop: function(event, ui) {
if(ui.draggable.is("#butterfly")){
$(this).addClass("correct").find("p").html("correct!");
done = false;
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000,function(){
done = true;
});
}
}
});
示例:
关于javascript - JQuery - 如果在页面上检测到 x 个类,则执行 y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21539077/