valgerofficial
@valgerofficial
Десигнер LVL100

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

Имеется 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.
  • Вопрос задан
  • 163 просмотра
Пригласить эксперта
Ответы на вопрос 2
Malmind
@Malmind
Насколько понял задачу нужно сделать один выбор из 3 кнопок и кнопка на которую нажал пользователь имеет одну картинку, а остальные имеют другую в это время.
Я это решил не через классы, а с помощью клонирования элементов и шаблонов (тег template).
https://codepen.io/qmalmind/pen/yLMjPBg
Для работы с классами обычно используют:
someVar.classList.add("someClass"); // Добавляет класс
someVar.classList.remove("someClass"); // Убирает класс 
someVar.classList.toggle("someClass"); // По очереди добавляет, убирает
Ответ написан
@sergiodev
Как вариант можно добавить внутрь каждой кнопки иконку .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');
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы