The "ON ()" is not acting as expected, why?

Question

The "ON ()" is not acting as expected, why?

Navigation

#1 by (2 votes)

1

Dear friends, I am a student and curious about it, not an experienced programmer, hence my question.

Come on, JQUERY's "ON ()" method can be associated with several types of events ("click", "mouseleave", etc.), including more than one at the same time, right ?! Well, through the "ON" method and a "CLICK" event, I tried to associate a change in the "SRC" of the image (in "ALT" and "TITLE", too). What I expected would happen, which was basically to change the image by clicking on it, it happens unsatisfactorily, the image changes very quickly and does not remain with the change, as you would expect. It only occurs at the instant of the click and back to what it was after releasing the mouse button.

Follow the HTML, images and JQUERY for review. (Thanks in advance for your help!)

HTML

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

IMAGES (Flags)

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)");
    });
});

jquery jquery-ui

asked by anonymous 29.08.2018 / 01:20

1 answer

How to add dependencies in a module already initialized in AngularJs? HTML - THYMELEAF - pass parameter

score 2 · Accepted Answer

Young man, let me make a few remarks about your code:

The use of the <a> tag can be waived if you are using the click event directly in the image. Do not just remove href , remove the entire <a> tag. What was happening was that by clicking on the banner the page was being updated and you did not even notice it.

When changing the attributes of the same element multiple times, do this at once, using the structure:

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

Simply separate the pairs with a colon (% w / o%) and a pair of the other with a comma (% w / o%), and include everything in braces (% w / o%). You do not have to repeat : several times.

And, to leave the flag with the default cursor for a link, include in the CSS:

.img-esp{
   cursor: pointer;
}

This is important for the user to see that there is some action there when being clicked.

If you are using , (which should use), do not use auto-close tags:

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

Your code with the above suggestions would look like this:

$(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><imgclass="img-esp" src="img/esp.png" alt="España" title="España">