1

Caros amigos, sou um estudante e curioso no assunto, não um programador experiente, daí minha pergunta.

Vamos lá, o método "ON()", do JQUERY, pode estar associado a diversos tipos de eventos ("click", "mouseleave", etc.), inclusive a mais de um ao mesmo tempo, certo?! Pois bem, por meio do método "ON" e de um evento "CLICK", tentei associar uma mudança no "SRC" da imagem (no "ALT" e no "TITLE", também). O que esperava que iria acontecer, que era, basicamente, mudar a imagem ao se clicar nela, acontece de modo insatisfatório, a imagem troca muito rapidamente e não permanece com a alteração, conforme se esperaria. Só ocorre no instante do click e volta ao que era depois de soltar o botão do mouse.

Seguem o HTML, as imagens e o JQUERY para análise. (Desde já, grato por sua ajuda!)

HTML

<a href=""> <!-- Espanha --> <img class="img-esp" src="img/esp.png" alt="España" title="España" /></a>

IMAGENS (Bandeiras)

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

JQUERY

$(document).ready(function() {

    $(".img-esp").on("click", function() {

       //Mudar a bandeirinha para a do Brasil (idioma português)
       $(this).attr("src", "img/bra.png");

       //Mudar o atributo ALT da bandeirinha (idioma português)
       $(this).attr("alt", "Português (Brasil)");

       //Mudar o atributo TITLE da bandeirinha (idioma português)
       $(this).attr("title", "Português (Brasil)");
    });
});
6
  • Creio que isso acontece devido o atributo href estar presente na tag a, para resolver, altere "click", function(e) { e.preventDefault(); ... ou apenas adicione um return false; ou simplesmente remova o atributo.
    – NoobSaibot
    Commented 28/08/2018 às 23:36
  • Retirei o A HREF e funcionou! Muito obrigado! Valeu! Commented 28/08/2018 às 23:41
  • O que é o "e.preventDefault();"? Desculpe a curiosidade em te perguntar. Commented 28/08/2018 às 23:42
  • preventDefault serve para alterar o comportamento padrão de um elemento no html. jsfiddle.net/pq8Lkuso/3 veja se é isso que deseja. Bastou adicionar <a href='javascript:void(0);'>
    – user77310
    Commented 28/08/2018 às 23:46
  • Se o <a> não está servindo, vc pode retirar ele todo e não apenas o href.
    – Sam
    Commented 29/08/2018 às 0:14

1 Resposta 1

2

Jovem, permita-me fazer algumas observações sobre o seu código:

O uso da tag <a> pode ser dispensada se você está usando o evento click diretamente na imagem. Não remova apenas o href, remova a tag <a> toda. O que estava acontecendo era que ao clicar na bandeira a página estava sendo atualizada e você nem percebeu.

Ao alterar os atributos do mesmo elemento várias vezes, faça isso de uma só vez, usando a estrutura:

$(this).attr({
   "src": "img/bra.png",
   "alt": "Português (Brasil)",
   "title": "Português (Brasil)"
});

Basta separar os pares com dois-pontos (:) e um par de outro com uma vírgula (,), e incluir tudo entre chaves ({}). Não precisa ficar repetindo $(this).attr várias vezes.

E, para deixar a bandeira com o cursor padrão de um link, inclua no CSS:

.img-esp{
   cursor: pointer;
}

Isso é importante para que o usuário veja que ali há alguma ação ao ser clicado.

Se está usando <!DOCTYPE html> (o que deveria usar), não use auto-fechamento nas tags:

<img class="img-esp" src="img/esp.png" alt="España" title="España"/>
                                                                  ↑
                                                          auto-fechamento

Seu código com as sugestões citadas ficaria assim:

$(document).ready(function() {
   $(".img-esp").on("click", function(){
      //Mudar a bandeirinha para a do Brasil (idioma português)
      $(this).attr({
         "src": "img/bra.png",
         "alt": "Português (Brasil)",
         "title": "Português (Brasil)"
      });
   });
});
.img-esp{
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-esp" src="img/esp.png" alt="España" title="España">

3
  • Obrigado, amigo! Estou usando <!DOCTYPE html>, sim! Só não entendi porque não posso usar o auto-fechamento das TAGs, assim não é o mais adequado, semântico?! A sua sugestão para aglutinar os atributos é muito boa também, meu caro! Não fica com aquela "tripa" enorme de códigos! Rê! Rê! Rê! Rê! Valeu! Commented 29/08/2018 às 21:53
  • =] O auto-fechamento de tags não é necessário em HTML5, exceto se você necessitar que a página seja parseada como documento XML.
    – Sam
    Commented 29/08/2018 às 21:59
  • Obrigado pelo esclarecimento! Commented 29/08/2018 às 22:27

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 .