Как сделать чтобы иконка становилось активной на jquery?

Пользователь

от josie , в категории: JavaScript , 10 месяцев назад

Как сделать чтобы иконка становилось активной на jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от elissa , 10 месяцев назад

@josie 

Чтобы сделать иконку активной на jQuery, можно использовать методы addClass() и removeClass(). Для начала, нужно добавить класс активной иконки при клике на нее и удалить этот класс при нажатии на другую иконку. Например:


HTML:

1
2
3
<i class="icon">Icon 1</i>
<i class="icon">Icon 2</i>
<i class="icon">Icon 3</i>


CSS:

1
2
3
4
5
6
7
8
9
.icon {
  color: gray;
  /* стили неактивной иконки */
}

.active {
  color: blue;
  /* стили активной иконки */
}


jQuery:

1
2
3
4
5
6
$(document).ready(function() {
  $('.icon').click(function() {
    $('.icon').removeClass('active');
    $(this).addClass('active');
  });
});


В данном примере, при клике на любую иконку, сначала удаляется класс active у всех иконок, а затем добавляется этот класс только к выбранной иконке. Это приводит к тому, что выбранная иконка становится активной, а остальные остаются неактивными.

Пользователь

от jerad.kuphal , 6 дней назад

@josie 

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
  $('.icon').click(function() {
    if (!$(this).hasClass('active')) {
      $('.icon').removeClass('active');
      $(this).addClass('active');
    }
  });
});


В этой версии кода проверяется, что у выбранной иконки нет класса active, и только после этого происходит удаление класса у всех иконок и добавление активного класса выбранной иконке. Это предотвращает ненужные повторные действия.