Как удалить класс с соседнего элемента?

Question

[Helping]

Всем привет!
Имеются товары, в которых есть выбор цвета, нужно чтобы при клике на другой цвет выделение переходило на него, а с предыдущего active убирался. т.е. выделение может быть только на 1 элементе в товаре.
jsfiddle.net/vr9x6y3m
*Извиняюсь, не ту ссылку отправил

Comments

[alex]

в чем проблема?

[Helping]

Alex, не могу догнать, как сделать чтоб у неактивных удалялось выделение

Answer 1

[alex]

$(document).on('click', '.btn-color', e => {
  $(e.currentTarget)
    .addClass('active')
    .siblings('.active')
    .removeClass('active')
})

Comments

[Helping]

Это тоже работает, спасибо!

[Helping]

Alex, Добрый вечер, можете подсказать как прочитать активный цвет у конкретного товара, а не у всех сразу?
var color = $('.active .color').text();
Заранее спасибо, если ответите

[alex]

Helping, а в чем сложности? это же вроде проще простого. единственное нужно какой-то уникальный идентификатор для продукта. как-то так

[Helping]

Alex, А Как поместить в color активный цвет товара?

$('div.btn-color').on('click', changeColor);

function changeColor(){

$(document).on('click', '.btn-color', e => {
  $(e.currentTarget)
    .addClass('active')
    .siblings('.active')
    .removeClass('active')
})
};
 
var cart = {};

$('button.btn-in_basket').on('click', addToCart);

function addToCart(){
	var color = $('.active .color').text();
    console.log(color);

	var articul = $(this).attr('data-art');

	if (cart[articul] != undefined){
		cart[articul]++;
	}
	else{
		cart[articul] = 1;
	}

    document.getElementById('modal-basket').innerHTML= Object.values(cart);
    console.log(cart);
}

[alex]

Helping, jsfiddle.net/xep4vqdk

[Helping]

Alex, пустоту возвращает.
Мне кажется к моему var color = $('.active .color').text();
нужно просто this какой - нибудь приписать

[alex]

Helping, у вас в разметке нет ни одного элемента с классом .color

[Helping]

Alex, Забыл совсем. .color - это span внутри .btn-color. Вот так у меня:

<div id="product-789" class="product">товар 789
   <div class="btn-color active"><span class="color">Чёрный</span></div>
   <div class="btn-color"><span class="color">Белый</span></div>
   <div class="btn-color"><span class="color">Зелёный</span></div>
   <button class="btn-in_basket">в корзину</button>
 </div>

[alex]

Helping, jsfiddle.net/16Lkwh09
я вам написал ужеведь.

то что здесь span в данном случае роли не играет, работает как с ним так и без него

[Helping]

Alex, Я понял в чём моя проблема.
Как быть если <button>в корзину</button> находится ещё в нескольких дивах?
jsfiddle.net/xep4vqdk/1

[alex]

Helping, jsfiddle.net/a7yp1ou6

Answer 2

[Алексей Пахомов]

JQuery

$('.product').click(function(){
	$('.product .hover-product').removeClass('active');
	$(this).find('.hover-product').addClass('active');
});

CSS

.product .hover-product.active {
      opacity: 1;
      visibility: visible;
      transform: none;
   }

Comments

[Helping]

jsfiddle.net/vr9x6y3m
*Извиняюсь, не ту ссылку отправил

[Алексей Пахомов]

if ($(this).has('active')){ 
$(this).parent().find('div.btn-color').removeClass('active');
$(this).addClass('active');
}
else{
//тут должно быть то, что отключит active у другого цвета
//потом добовляем active тому, на что нажали
$(this).addClass('active');
}

[Helping]

RiverMacaroon0, то, что надо! Большое спасибо!)