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

@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 у всех иконок, а затем добавляется этот класс только к выбранной иконке. Это приводит к тому, что выбранная иконка становится активной, а остальные остаются неактивными.

@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, и только после этого происходит удаление класса у всех иконок и добавление активного класса выбранной иконке. Это предотвращает ненужные повторные действия.