Как сделать изменение изображения при клике JQuery

0

RazumovY

26 мая 2018, 13:08

716

Народ, нужна помощь, нужно сделать как в онлайн магазинах функцию выбора цвета, что бы изображение после клика менялось, изображений много, галерея, не могу додуматься в силу абсолютного незнания jQuery:D:


<div class="col ">

      <div class="thumbnail">

          <h3>Заголовок</h3>

        <img src="images/osveshenie/1.png"  id="basic"alt="...">

        <div class="caption">

         <p>Артикул</p>

          <p><a href="#" class="btn btn-primary" id="gold" role="button">Золото</a> 

 <a href="#" class="btn btn-default" id="silver" role="button">Серебро</a></p>

        </div>

      </div>

    </div>

Пытался сделать так, но меняется только первое изображение, может как то привязать кнопку к блоку?

$(document).ready(function(){

	$( "#silver" ).one( "click", function(){

  $('#basic').each(function(){

    var old_src, new_src, temp;

    old_src = $(this).attr('src');

    temp = old_src.split('.');

    temp[0] += '-s';

    new_src = temp.join('.');

    $(this).attr('src',new_src);

  })

});

});

Выручайте, весь день голову ломаю))

S

469

Sitealert

26 мая 2018, 17:46

#1

RazumovY:
Пытался сделать так, но меняется только первое изображение
$( "#silver" ).one( "click", function(){
$('#basic').each(function(){

Я не знаю, что там у Вас за код на странице, но судя по всему, всё очень криво.

1. Попробуйте написать .on('click' вместо .one('click'

2. У каждого элемента должен быть уникальный id, не может быть нескольких одинаковых id на одной странице. Для обозначения группы элементов используйте class.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Js код изменяет размер Падает memcached Нарушения и угрозы безопасности

71

Эгоист

26 мая 2018, 18:30

#2

При клике на ссылку должно меняться изображение в теге img c id basic?

S

469

Sitealert

26 мая 2018, 18:35

#3

Эгоист, да не галерея у него. Это вариативные товары. Карточка товара, в ней фото какой-нибудь люстры, под фото кнопочки разного цвета. При нажатии на золотую кнопочку фото серебряной люстры заменяется на фото золотой люстры.

71

Эгоист

26 мая 2018, 19:31

#4

Sitealert:
Эгоист, да не галерея у него. Это вариативные товары. Карточка товара, в ней фото какой-нибудь люстры, под фото кнопочки разного цвета. При нажатии на золотую кнопочку фото серебряной люстры заменяется на фото золотой люстры.

Та я уже понял..

Он что то мне подсказывает не так начал делать.. надо больше информации

RY

0

RazumovY

1 июня 2018, 11:52

#5

Sitealert:
Эгоист, да не галерея у него. Это вариативные товары. Карточка товара, в ней фото какой-нибудь люстры, под фото кнопочки разного цвета. При нажатии на золотую кнопочку фото серебряной люстры заменяется на фото золотой люстры.

Ну это вроде галерей, на странице отображаются например 30 изображений светильников, и под ними нужно сделать кнопки изменения цвета светильника, но не в карточке, а на самой странице, где все 30 изображений.

RY

0

RazumovY

1 июня 2018, 11:58

#6

Sitealert:
Я не знаю, что там у Вас за код на странице, но судя по всему, всё очень криво.
1. Попробуйте написать .on('click' вместо .one('click'
2. У каждого элемента должен быть уникальный id, не может быть нескольких одинаковых id на одной странице. Для обозначения группы элементов используйте class.

1.Ну дело не в "on" и "one", но да, это криво)

2. Я понимаю, но если к каждому изображению присваивать свои id, то нужно так же и скрипт повторять с новым id? А если сделать классом, то при нажатии на кнопку все изображения с этим классом изменят путь.

S

469

Sitealert

1 июня 2018, 13:50

#7

Всё будет так, как Вы сделаете. А id должен быть уникальным.

168

dma84

1 июня 2018, 18:14

#8

RazumovY:
1.Ну дело не в "on" и "one", но да, это криво)
2. Я понимаю, но если к каждому изображению присваивать свои id, то нужно так же и скрипт повторять с новым id? А если сделать классом, то при нажатии на кнопку все изображения с этим классом изменят путь.

С вашим уровнем знания jQuery и DOM, проще нанять программиста, который это сделает за 5-10 минут, чем пытаться вам что-то объяснить, не видя сайта.

Что такое Power BI и зачем это нужно бизнесу

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах