Как переключать классы у нескольких кнопок сразу?

Question

[valgerofficial]

Имеется 3 кнопки с иконками, по клику на одну из них, вместо предыдущей иконки, появляется иконка с крестиком. Но вот в чем проблема, если кликаешь на другую кнопку, то предыдущая кнопка не меняет свое свойство (то есть не заменяется крестик на предыдущую иконку). И вот вопрос, как сменить класс предыдущей иконки, по клику на другую кнопку? То есть у каждой иконки должна меняться иконка на крестик, а у предыдущей кнопки удаляться.

<!-- Кнопки -->
<div class="header__button">
	<button class="btn header__basket_btn"><i class="feather-shopping"></i></button>
        <button class="btn header__search_btn"><i class="feather-search"></i></button>
	<button class="btn header__user_btn"><i class="feather-user"></i></button>
</div>

Класс должен меняться с .feather-shopping на .feather-close.

Comments

[Yupiter7575]

Забыли js прикрепить

[valgerofficial]

Yupiter7575, В том то и дело что js я не писал. Меня интересует как можно такое реализовать желательно на jQuery

Answer 1

[Malmind]

Насколько понял задачу нужно сделать один выбор из 3 кнопок и кнопка на которую нажал пользователь имеет одну картинку, а остальные имеют другую в это время.
Я это решил не через классы, а с помощью клонирования элементов и шаблонов (тег template).
https://codepen.io/qmalmind/pen/yLMjPBg
Для работы с классами обычно используют:

someVar.classList.add("someClass"); // Добавляет класс
someVar.classList.remove("someClass"); // Убирает класс 
someVar.classList.toggle("someClass"); // По очереди добавляет, убирает

Comments

[valgerofficial]

https://bee-key.ru/ на вот этом сайте с права в шапке так реализованно. Тольк я не пойму как это работает, и иконки там на css, а у меня шрифтом.

[Malmind]

valgerofficial, сделал, как тебе надо. Смотри на том же codepen. https://codepen.io/qmalmind/pen/yLMjPBg

[valgerofficial]

Malmind, Можешь дать свой телеграм? Дело есть.

[Malmind]

valgerofficial, @Sunchesco

Answer 2

[Sergio]

Как вариант можно добавить внутрь каждой кнопки иконку .feather-close, скрытую по умолчанию, и по клику на кнопку показывать эту иконку и скрывать изначальную иконку:

<!-- HTML -->

<div class="header__button">
    <button class="btn header__basket_btn">
        <i class="icon feather-shopping"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__search_btn">
        <i class="icon feather-search"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__user_btn">
        <i class="icon feather-user"></i>
        <i class="close-icon feather-close"></i>
    </button>
</div>

/* CSS */

.header__button .btn .close-icon {
    display: none;
}
.header__button .btn.close .icon {
    display: none;
}
.header__button .btn.close .close-icon {
    display: inline;
}

// JavaScript

$('.header__button .btn').click(function() {
    $(this).toggleClass('close');
});