Скрипт для смены изображений по выбору цвета?

Question

[Дмитрий Медведкин]

Всем привет. Есть карточка товара, внутри нее есть список цветов,при нажатии на цвет, изображение должно меняться,а главное чтобы все это происходило внутри одной карточки товара,а не во всех на странице,так как у всех один класс. Изображение то у меня меняется по клику,но это происходит во всех карточках на странице,не знаю как сделать чтобы все действия были только внутри одной карточки.
Спасибо

var $button = $('.colors-pic');

	$button.on('click', function () {
	var n=$button.index(this);
	
        $(".product-img").removeClass("ch-img");
        $(".product-img").eq(n).addClass("ch-img");
    
	});

Comments

[Шохрух Шаймардонов]

Наличие скриншота - хорошо, но без кода никто не поможет. Скиньте код и будет вам ответ

[Дмитрий Медведкин]

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

[Шохрух Шаймардонов]

DmitriyPHC, а вы уверены что в переменную n у вас записывается число?

Залейте код в jsfiddle, попробую подкорректировать

[BATPYIIIKOB]

DmitriyPHC, кода нет, сказать сложно. Как вариант - добавьте в каждый элемент свой атрибут, например:
<div data-id=""> </div>

[Дмитрий Медведкин]

Шохрух Шаймардонов, https://jsfiddle.net/9vdoxk0y/6/ только вот таких карточек может быть хоть 100 на странице,мне нужно чтобы я тыкал на цвет,и появлялась нужная фотка, но только в одной карточке товара,а не во всех на странице.

[Шохрух Шаймардонов]

DmitriyPHC, https://jsfiddle.net/9vdoxk0y/6/ и что это должно дать? почти голый html

[Дмитрий Медведкин]

Шохрух Шаймардонов, https://jsfiddle.net/vwt9n2fa/ финальный вот этот, спасибо

Answer 1

[Владимир Рыжов]

var $button = $('.colors-pic');

$button.on('click', function () {
    var n=$button.index(this);
    $(this).closest('селектор карточки').find('.product-img').removeClass("ch-img").eq(n).addClass("ch-img");
});

Comments

[Дмитрий Медведкин]

Почти то, но на вторую вообше не распостроняется https://jsfiddle.net/dmitriyPHC/t5ubhf0s/6/

[Владимир Рыжов]

DmitriyPHC,

$('.color-pic').on('click', function () {
    $(this).closest('.card').find('.tovar').removeClass("active").eq($(this).index()).addClass("active");
});

[Дмитрий Медведкин]

Владимир Рыжов, Спасибо огромное!!!

[Дмитрий Медведкин]

Владимир Рыжов, А не подскажешь как дополнить этот код, нужно еще каждому .color-pic при клике добавлять класс .color-pic-active (он добавляет рамку вокруг цвета), но чтобы у первого, .color-pic он убирался, так как по умолчанию он всегда присвоен первому элементу.

Answer 2

[Шохрух Шаймардонов]

Comments

[Дмитрий Медведкин]

А не подскажешь как дополнить этот код, нужно еще каждому .color-pic при клике добавлять класс .border ,но чтобы у первого, .color-pic он убирался, так как по умолчанию он всегда присвоен первому элементу.
https://jsfiddle.net/dmitriyPHC/c76y4tsn/5/
И спасибо огромное, твое решение работает!

[Шохрух Шаймардонов]

DmitriyPHC, дополните вот этим:

$(this).closest('.card').find('.color-pic').removeClass("border").eq($(this).index()).addClass("border");

[Дмитрий Медведкин]

Шохрух Шаймардонов, просто супер! Спасибо еще раз)

[Шохрух Шаймардонов]

DmitriyPHC, пожалуйста

[alex-1917]

nth-child зачем? обожимой... www.jooom.ru/toster/products3.html

Answer 3

[alex-1917]

И снова здрасти))
Опять табы...12 вопрос за неделю...
ТС,что и правда у вас такая структура HTML? Ппц если честно.
Вот так www.jooom.ru/toster/toster_10.html надо формировать товары, проще же!
я уж не говорю про дата-атрибуты, с ними страница грузилась бы быстрее на порядок.
Касаемо вашего вопроса - вот - www.jooom.ru/toster/products3.html - скрипта меньше ровно в 6 раз, нежели тут соседи насоветовали...

Comments

[Дмитрий Медведкин]

Спасибо большое за решение, возьму его себе. В первом ответе в комментариях тоже похожее решение как у вас.

[alex-1917]

DmitriyPHC, по моей ссылке заходил?
я там обновил скрипт, сделал всплывашку, глянь

[Модератор]

Тостер - это не форум! Вы систематически злоупотребляете текстом не по делу, провокационными заявлениями, нарушениями норм русского языка, использованием жаргонных выражений и завуалированной экспрессивной лексики, смайлами и т.п. Убедительно прошу впредь от этого воздерживаться.