1

Есть код:

$(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>

Как сделать так, чтобы при новом клике вернулся исходный src?

4
  • 1
    Форматирование кода сделайте, пожалуйста!
    – sp7
    27 июл 2017 в 7:59
  • 1
    Исходный сурс присваиваете переменной, при повторном клике меняете сурс
    – DaemonHK
    27 июл 2017 в 8:07
  • Это нужно создать массив со всеми src в виде переменных?
    – cherkas
    27 июл 2017 в 8:27
  • Уважаемые пользователи. Если вы получили ответ на свой вопрос, просьба не забывать помечать его как ответ! Это важно! 18 авг 2017 в 4:10

2 ответа 2

1

Обновленный вариант:

$(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-q-g-100-100-7.jpg" data-original="http://lorempixel.com/output/food-q-g-100-100-7.jpg" data-alt="http://lorempixel.com/output/food-q-c-100-100-8.jpg">
  </a>
  <a href="#" class="sort-item" title="Безалкогольная продукция">
    <img src="http://lorempixel.com/output/food-q-g-100-100-2.jpg" data-original="http://lorempixel.com/output/food-q-g-100-100-2.jpg" data-alt="http://lorempixel.com/output/food-q-c-100-100-1.jpg">
  </a>
  <a href="#" class="sort-item" title="Безалкогольная продукция">
    <img src="http://lorempixel.com/output/food-q-g-100-100-4.jpg" data-original="http://lorempixel.com/output/food-q-g-100-100-4.jpg" data-alt="http://lorempixel.com/output/food-q-c-100-100-6.jpg">
  </a>
</div>

Первоначальный вариант:

$(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-q-c-100-100-8.jpg" src="http://lorempixel.com/output/food-q-c-100-100-10.jpg">
  </a>
</div>

2
  • Все работает,но нужно что бы при клике на на следующею ссылку,вернулся src у предыдущего img
    – cherkas
    27 июл 2017 в 8:43
  • Если добавление еще одного аттрибута не проблема, то смотрите обновленный вариант.
    – Romchik
    27 июл 2017 в 9:50
0

Приветствую!

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.