3

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>
4
  • Esse script está errado, coloca certo, Unexpected end of input"
    – user60252
    Commented 30/04/2018 às 14:25
  • eu havia colocado apenas uma parte. Atualizei e coloquei a função completa. Commented 30/04/2018 às 14:30
  • @dvd funcionou! Obrigado! Commented 30/04/2018 às 14:37
  • Blz, vou postar a solução
    – Sam
    Commented 30/04/2018 às 14:38

2 Respostas 2

2

Você pode fazer assim, usando o off:

   // Começa com o click associado
$('#botaoAcao').click(clickBotao);

$('#ligar').click(function() {
    $('#botaoAcao').click(clickBotao);
    $('#botaoAcao').text('Clique aqui');
});

$('#desligar').click(function() {
    $('#botaoAcao').off('click');
    $('#botaoAcao').text('Sem click :(');
});


function clickBotao() {
   console.log('Ação de clicar...\n');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="botaoAcao">Clique aqui</button>
<button id="ligar">LigarClick</button>
<button id="desligar">Desligar Click</button>

1
  • obrigado! Vou tentar adaptar! ^_^ Commented 30/04/2018 às 14:30
1

Esvazie o onclick apenas das imagens da div atual com:

$("img", $(imagem).closest("div")).attr('onclick', null);

Coloque esta linha antes do return da função:

function imagemCerta(imagem){
  ...
  $("img", $(imagem).closest("div")).attr('onclick', null);
  return;
}

No evento $("button[name='proximo']").click(function(){, substitua a linha $("img").on('click', imagemCerta()); por $("img").on('click'); para restaurar o evento de clique nas imagens.

7
  • exatamente o que eu queria. Muito obrigado!! Commented 30/04/2018 às 14:44
  • agora que percebi. Se eu clicar em uma imagem errada, na próxima imagem que eu clicar, ela também vai receber o evento de imagem errada, mesmo que ela seja correta. Perceba que uma imagem na div recebe uma imagem diferente das outras no click. Como eu posso reverter isso?? Commented 30/04/2018 às 15:01
  • Só um instante que vou verificar...
    – Sam
    Commented 30/04/2018 às 15:02
  • A proxima div "animais" já vem com os onclick cheios, certo?
    – Sam
    Commented 30/04/2018 às 15:05
  • 1
    Pronto. Editei a resposta. QQ dúvida é só falar.
    – Sam
    Commented 30/04/2018 às 15:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .