Как вернуть исходный src img

156
28 июля 2017, 02:58

Есть код:

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

Answer 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>

Answer 2

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

let full_src = this.getAttribute("data-full"),
         src = this.src;
    this.src = full_src,
    this.setAttribute("data-full", src);
READ ALSO
Как улучшить код по получению непустого элемента из массива?

Как улучшить код по получению непустого элемента из массива?

Вводные: есть некий массив с ключами, есть строка с несколькими ключами, один из которых подойдет к этому массиву (те

175
Ошибка получения данных из БД

Ошибка получения данных из БД

Функционал редактирования пользователя:

173