Olá. Estou fazendo um pequeno trabalho para faculdade, onde uma criança precisa clicar na imagem que está errada num grupo com outras 3 imagens. Ao clicar em uma das imagens, ele recebe um feedback se aquela é a mensagem certa ou não, aparece um botão para exibir o resultado e um botão para ir pra um próximo grupo de imagens, que nada mais é que um div oculto que passa a ser visível, enquanto o atual fica invisível.
Eu preciso parar o onclick das imagens, de modo que eu só consiga clicar em uma por vez. Eu consegui fazer isso funcionar, mas não consegui fazer o onclick voltar no div seguinte.
Eu usei dessa forma:
$("img").prop('onclick', null).off('click');
Tentei usar o on() depois, mas não consegui. Agora estou usando o off(), mas não chega nem a desativar. Segue o código:
function imagemCerta(imagem){
var nome = $(imagem).attr('name');
switch($(imagem).closest("div").attr('id')){
case "comidas":
if( nome == "brocolis") {
total = total + 1;
console.log("Total", total);
}
$("img").off('click');
$("button[name='resultado']").show();
$("button[name='resultado']").click(function(){
$("img[name='hamburguer']").attr("src", "./imagens/hamburguer.png");
$("img[name='brocolis']").attr("src", "./imagens/check.png");
$("img[name='pizza']").attr("src", "./imagens/pizza.png");
$("img[name='hotdog']").attr("src", "./imagens/hotdog.png");
$("button[name='proximo']").show();
$("button[name='resultado']").hide();
$("button[name='proximo']").click(function(){
$("div[id='comidas']").hide();
$("div[id='animais']").show();
$("img").on(imagemCerta);
});
});
break;
case "animais":
if(nome == "sanduba"){
total = total + 1;
}
$("img").off('click');
$("button[name='resultado2']").show();
$("button[name='resultado2']").click(function(){
$("img[name='cachorro']").attr("src", "./imagens/cachorro.png");
$("img[name='sanduba']").attr("src", "./imagens/check.png");
$("img[name='leao']").attr("src", "./imagens/leao.png");
$("img[name='burro']").attr("src", "./imagens/burro.png");
$("button[name='proximo2']").show();
$("button[name='resultado2']").hide();
$("button[name='proximo2']").click(function(){
$("div[id='animais']").hide();
$("div[id='transportes']").show();
$("img").on(imagemCerta);
});
});
break;
case "transportes":
if(nome == "robo"){
total = total + 1;
}
$("img").off('click');
$("button[name='resultado3']").show();
$("button[name='resultado3']").click(function(){
$("img[name='trem']").attr("src", "./imagens/trem.png");
$("img[name='robo']").attr("src", "./imagens/check.png");
$("img[name='caminhao']").attr("src", "./imagens/caminhao.png");
$("img[name='aviao']").attr("src", "./imagens/aviao.png");
$("button[name='proximo3']").show();
$("button[name='resultado3']").hide();
$("button[name='proximo3']").click(function(){
$("div[id='transportes']").hide();
$("div[id='final']").show();
$("img").on(imagemcerta);
});
});
break;
}
return;
}
meu arquivo html:
<div id="comidas">
<center>
<img name="hamburguer" src="./imagens/hamburguer.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
<img name="pizza" src="./imagens/pizza.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
<img name="brocolis" src="./imagens/brocolis.png" onclick="this.src='./imagens/check.png'; imagemCerta(this)">
<img name="hotdog" src="./imagens/hotdog.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
<br>
<button name="resultado" style="display: none" class="btn btn-danger">Resultado</button>
<button name="proximo" style="display: none" class="btn btn-primary">Proximo >>> </button>
</center>
</div>
Unexpected end of input"