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
    Commented 27 июл. 2017 в 7:59
  • 1
    Исходный сурс присваиваете переменной, при повторном клике меняете сурс
    – DaemonHK
    Commented 27 июл. 2017 в 8:07
  • Это нужно создать массив со всеми src в виде переменных?
    – cherkas
    Commented 27 июл. 2017 в 8:27
  • Уважаемые пользователи. Если вы получили ответ на свой вопрос, просьба не забывать помечать его как ответ! Это важно! Commented 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
    Commented 27 июл. 2017 в 8:43
  • Если добавление еще одного аттрибута не проблема, то смотрите обновленный вариант.
    – Romchik
    Commented 27 июл. 2017 в 9:50
0

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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