Изменение изображения по клику
Здравствуйте. Суть проблемы: на сайте есть панель категорий, по клику добавляется класс, также необходимо чтобы по клику чб изображение, которое есть сейчас менялось на цветное. Идея была такая - по клику на блок вытаскивать по классу атрибут src дочернего элемента и дописывать к названию файла символы, тем самым меняя ссылку на другую. т.е. сейчас изображение например: img src="put/put2/put3/vase.svg", при клике на родительский элемент к нему добавляется класс и меняется путь к изображению на img src="put/put2/put3/vase_a.svg" и так все на все изображения.
На данный момент не удается даже вытащить путь. Вытаскивается только ссылка первого. Буду рада помощи... id ссылки и изображения берутся из базы <a id="cat_3" href="#" class="opacity_filter checkshadow3 isExcept" onclick="return false"><img src="/view/defaults-instance/images/forms/filter/closet.svg" class="a_check my-1 graycategory" title="Категория 3" height="48"></a>
$('.checkshadow3').click(function() {
if($(this).is('.check'))
{
$(this).removeClass('check');
}
else
{
$(this).addClass('check');
var images = $('.a_check').attr('src');
alert(images);
}
});
|
по повторному клику опять на vase.svg менять?
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<a id="cat_3" href="#" class="opacity_filter checkshadow3 isExcept" onclick="return false">
<img src="put/put2/put3/vase.svg" class="a_check my-1 graycategory" title="Категория 3" height="48">
</a>
<script>
$('.checkshadow3').click(function() {
var th = $(this), child = th.children();
if(th.is('.check')){
th.removeClass('check');
child.attr('src', child.attr('src').replace(/(\w+)_a(\.\w+)/, '$1'+'$2'));
}
else{
th.addClass('check');
child.attr('src', child.attr('src').replace(/(\w+)(\.\w+)/, '$1'+'_a'+'$2'));
}
});
</script>
|
$('.checkshadow3').click(function() {
const originalSrcDataPropertyName = 'original-src';
const $this = $(this).find('img');
if ($this.data(originalSrcDataPropertyName))
return void $this
.attr('src', $this.data(originalSrcDataPropertyName))
.removeData(originalSrcDataPropertyName);
let source = $this.attr('src').split('?').shift().split('/').pop();
let src = source.split('.');
src[0] += '_a';
src = src.join('.');
$this
.data(originalSrcDataPropertyName, $this.attr('src'))
.attr('src', $this.attr('src').replace(source, src));
});
|
j0hnik, огромное спасибо! То что нужно) Буду разбирать Ваш код
|
Ingred,
без onclick ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.check{
background-color: Red;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<a id="cat_3" href="#" class="opacity_filter checkshadow3 isExcept" >
<img src="put/put2/put3/vase.svg" class="a_check my-1 graycategory" title="Категория 3" height="48">
</a>
<script>
$(function() {
$(".checkshadow3").click(function(event) {
event.preventDefault();
var img = $(this).toggleClass("check").find("img")[0];
img.src = img.src.replace(/(_a)?\./, function(a, b) {
return b ? "." : "_a."
})
})
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 07:12. |