There is a code:

$(document).ready(function () { $('.sort img').click(function(){this.src = this.getAttribute('data-full');}); }) <div class="sort"> <a href="#" class="sort-item " title="Безалкогольная продукция"> <img id="hoverimg " data-full="<?php echo get_template_directory_uri(); ?>/img/menu/icon2.0/bezalchover.png" src="<?php echo get_template_directory_uri(); ?>/img/menu/icon2.0/bezalk.png"> </a> <a href="#" class="sort-item " title="Алкоголь"> <img id="hoverimg " data-full="<?php echo get_template_directory_uri(); ?>/img/menu/icon2.0/alchover.png" src="<?php echo get_template_directory_uri(); ?>/img/menu/icon2.0/alc.png"> </a> </div>

How to make the new src return with a new click?

  • one
    Please format the code! - sp7
  • one
    You assign a source resource to a variable, when you click again, you change the source - DaemonHK
  • Does it need to create an array with all src as variables? - cherkas
  • Dear users. If you have received an answer to your question, please do not forget to mark it as an answer! It is important! - Stanislav Hmelevsky

2 answers 2

Updated version:

 $(document).ready(function() { var items = $('.sort-item').find('img'); items.click(function() { var clicked = $(this); items.each(function() { var el = $(this), original = el.data('original'); if (el.attr('src') !== clicked.attr('src')) { el.attr('src', original); } }); var el = $(this), original = el.data('original'), alt = el.data('alt'); if (el.attr('src') === alt) { el.attr('src', original); } else { el.attr('src', alt); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sort"> <a href="#" class="sort-item" title="Безалкогольная продукция"> <img src="http://lorempixel.com/output/food-qg-100-100-7.jpg" data-original="http://lorempixel.com/output/food-qg-100-100-7.jpg" data-alt="http://lorempixel.com/output/food-qc-100-100-8.jpg"> </a> <a href="#" class="sort-item" title="Безалкогольная продукция"> <img src="http://lorempixel.com/output/food-qg-100-100-2.jpg" data-original="http://lorempixel.com/output/food-qg-100-100-2.jpg" data-alt="http://lorempixel.com/output/food-qc-100-100-1.jpg"> </a> <a href="#" class="sort-item" title="Безалкогольная продукция"> <img src="http://lorempixel.com/output/food-qg-100-100-4.jpg" data-original="http://lorempixel.com/output/food-qg-100-100-4.jpg" data-alt="http://lorempixel.com/output/food-qc-100-100-6.jpg"> </a> </div>

Initial version:

 $(document).ready(function() { $('.sort img').click(function() { var _this = $(this), current = _this.attr('src'), swap = _this.attr('data-full'); _this.attr('src', swap).attr('data-full', current); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sort"> <a href="#" class="sort-item" title="Безалкогольная продукция"> <img id="hoverimg" data-full="http://lorempixel.com/output/food-qc-100-100-8.jpg" src="http://lorempixel.com/output/food-qc-100-100-10.jpg"> </a> </div>

  • Everything works, but if you need to click on the following link, src returns from the previous img - cherkas
  • If adding another attribute is not a problem, then see the updated version. - Romchik

Greetings

 let full_src = this.getAttribute("data-full"), src = this.src; this.src = full_src, this.setAttribute("data-full", src);