Форум

Ingred · #1 (**permalink**) 07.08.2018, 09:42

Здравствуйте. Суть проблемы: на сайте есть панель категорий, по клику добавляется класс, также необходимо чтобы по клику чб изображение, которое есть сейчас менялось на цветное. Идея была такая - по клику на блок вытаскивать по классу атрибут 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);
    } 
});

j0hnik · #2 (**permalink**) 07.08.2018, 09:53

по повторному клику опять на vase.svg менять?

j0hnik · #3 (**permalink**) 07.08.2018, 10:03

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

Nexus · #4 (**permalink**) 07.08.2018, 10:06

$('.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));
});

Ingred · #5 (**permalink**) 07.08.2018, 10:18

j0hnik, огромное спасибо! То что нужно) Буду разбирать Ваш код

рони · #6 (**permalink**) 07.08.2018, 10:24

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>

Форум

Справочник

Discord чат

Курсы javascript