Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2018, 09:42
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

Изменение изображения по клику
Здравствуйте. Суть проблемы: на сайте есть панель категорий, по клику добавляется класс, также необходимо чтобы по клику чб изображение, которое есть сейчас менялось на цветное. Идея была такая - по клику на блок вытаскивать по классу атрибут 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);
    } 
});
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2018, 09:53
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

по повторному клику опять на vase.svg менять?
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2018, 10:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

Последний раз редактировалось j0hnik, 07.08.2018 в 10:27.
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2018, 10:06
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

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

Последний раз редактировалось Nexus, 07.08.2018 в 10:08.
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2018, 10:18
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

j0hnik, огромное спасибо! То что нужно) Буду разбирать Ваш код
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2018, 10:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение изображения по клику _alta_ Общие вопросы Javascript 2 19.04.2016 14:59
Смена фонового изображения по кругу, по клику на одну кнопку Manoftheyear Элементы интерфейса 7 21.03.2016 06:45
Изменение размеров map area при изменении размера изображения. mxup Общие вопросы Javascript 1 09.07.2015 16:01
Интерактивное изменение цвета сегментов изображения dmitriy94 Общие вопросы Javascript 6 27.12.2014 19:14
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06