我是jQuery新手,有一个问题我无法解决。
我的问题:我想有多个事件与更多的点击。目前,我有一个图像与一个好的和一个错误的选择(如果或否则)。但是在我点击正确选择的那一刻,文字就会改变(=good),而且错误选择的番茄也会出现在屏幕上。
对于下一个选择,西红柿也出现在屏幕上,对于正确的选择....这是一张有五个瓶子(点击五次)的图片。
一定是带有绑定/解除绑定或开/关的东西,但是我找不到。有人能帮帮我吗?
<script>
var mousePos = {
x: 0,
y: 0
}
var number = "one";
function clickHandler()
{
$(".apparatuur").click(function(e)
{
mousePos.x = e.pageX;
mousePos.y = e.pageY;
{console.log(mousePos)
if(number === "one")
if(mousePos.x > 33 && mousePos.x < 140 && mousePos.y > 40 && mousePos.y < 333)
{console.log("click registered no.1")
number = "two"
clickThis()
}
else
{console.log("click registered no.1")
$(".tomaat").fadeIn()
setTimeout(function() {
$(".tomaat").fadeOut() }, 1000)
number = "one"
}
}
if(number === "two")
{if(mousePos.x > 445 && mousePos.x < 600 && mousePos.y > 134 && mousePos.y < 344)
{console.log("click registered no.2")
number = "three"
clickThis()
}
else
{console.log("click registered no.2")
$(".tomaat").fadeIn()
setTimeout(function() {
$(".tomaat").fadeOut() }, 1000)
number = "two"
}
}
//three more clicks needed for numbers three, four and five.
})
}
function clickThis(){switch(number){
case "one": $(".clickthis").html("1. Click on the agent that makes sure the chemical sticks to the plant.").css("background-color", "white");
break;
case "two": $(".clickthis").html( "2. Click on the chemical that works against fungi." ).css ("background-color", "#ffff99");
break;
//case three, four and five...
case "done": $(".clickthis").html("You have done well.").css("background-color", "white");
}
}
$(document).ready(function(){
clickHandler()
clickThis()
})
</script>
感谢一位朋友,我找到了一个解决办法
if(number === "one")
{
if(mousePos.x > 33 && mousePos.x < 140 && mousePos.y > 40 && mousePos.y < 333)
{console.log("click registered no.1")
//this timeout prevents the appearing of the tomato
setTimeout(function() {
number = "two"
clickThis()
}, 100)
}