下一个带有新点击的事件,我错过了一些东西,但是什么?



我是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)
            }

相关内容

最新更新