<img data-src="stol1_hover.png" class="img_table" src="stol1.png"> <img data-src="stol1_hover.png" class="img_table" src="stol1.png"> $('img.img_table').click(function(){ var $this = $(this); var newSource = $this.data('src'); $this.data('src', $this.attr('src')); $this.attr('src', newSource); });

Suppose you clicked on the first picture, it stood out, how to make a click on the second, the first one lost activity, and the second was active.
In the example there are two pictures, but maybe more

  • What is meant by the loss of activity? - Grundy
  • @Grundy to replace src back with stol1.png - Silentium

1 answer 1

Without saving additional information about the status of the element - no way. Mark the active element with the class "active". Change the images for all active elements except the clicked (and remove the class "active" from them) before processing the element that was clicked.

  $('img.img_table').click(function(){ var $this = $(this); $('img.img_table.active').not($this).each(function() { var newSource = $(this).data('src'); $(this).data('src', $(this).attr('src')); $(this).attr('src', newSource); $(this).removeClass("active"); }); var newSource = $this.data('src'); $this.data('src', $this.attr('src')); $this.attr('src', newSource); $this.toggleClass("active"); });
  • not was a function. Well, it would not be bad to add explanations - Grundy
  • Thanks, everything works fine! - Silentium