Есть код:
$(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?
Обновленный вариант:
$(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>
let full_src = this.getAttribute("data-full"),
src = this.src;
this.src = full_src,
this.setAttribute("data-full", src);
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть массив строк, необходимо:
Вводные: есть некий массив с ключами, есть строка с несколькими ключами, один из которых подойдет к этому массиву (те