Изменить класс переключателя при проверке с помощью jQuery

Я хочу сделать рейтинговую систему со смайликом от Font Awesome, вот так

$('input[type=radio][name=smiley]').change(function() {
  if (this.checked) {
    console.info(this.value);
    $(this).removeClass('fa-regular');
    $(this).addClass('fa-solid');
  } else {
    $(this).removeClass('fa-solid');
    $(this).addClass('fa-regular');
  }
});

form#smileys input[type = "radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 30px;
  border: none;
  cursor: pointer;
  transition: border 0.2s ease;
  filter: grayscale(100%);
  margin: 0;
  transition: all 0.2s ease;
}

form#smileys input[type = "radio"]:hover,
form#smileys input[type = "radio"]:checked {
  filter: grayscale(0);
}

form#smileys input[type = "radio"]:focus {
  outline: 0;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel = "stylesheet" />
<form id = "smileys">
  <input type = "radio" name = "smiley" id = "frown" value = "frown" class = "fa-face-frown fa-2xl fa-regular">
  <input type = "radio" name = "smiley" id = "eye-roll" value = "eye-roll" class = "fa-regular fa-face-rolling-eyes fa-2xl">
  <input type = "radio" name = "smiley" id = "neutral" value = "neutral" class = "fa-regular fa-face-meh fa-2xl">
  <input type = "radio" name = "smiley" id = "smile-wink" value = "smile-wink" class = "fa-regular fa-face-smile-wink fa-2xl">
  <input type = "radio" name = "smiley" id = "happy" value = "happy" class = "fa-regular fa-face-laugh-beam fa-2xl">
</form>

Пока значок меняется при проверке, но не изменится обратно, когда я проверю другое радио. Я знаю о проблеме, заключающейся в том, что $(this) будет проверять только текущую проверенную радиостанцию, но я изо всех сил пытаюсь найти другое исправление, чем изменение остальных 4 идентификаторов каждый раз, когда проверяется радиостанция, что очень неэффективно. Любые рекомендации о том, как мне подойти к этому?

javascript jquery

20.04.2023 10:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно удалить класс fa-solid и добавить класс fa-regular к родному элементу, а не к элементу, по которому щелкнули. Также вам не нужно проверять флажок, потому что он всегда проверяется при щелчке по элементу, поскольку это переключатель. И удалите fa-regular и добавьте класс fa-solid к текущему элементу. Проверьте следующий пример кода.

$('input[type=radio][name=smiley]').change(function() {
  $(this).siblings("input").removeClass('fa-solid').addClass('fa-regular');
  $(this).removeClass('fa-regular').addClass('fa-solid');
});

form#smileys input[type = "radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 30px;
  border: none;
  cursor: pointer;
  transition: border 0.2s ease;
  filter: grayscale(100%);
  margin: 0;
  transition: all 0.2s ease;
}

form#smileys input[type = "radio"]:hover,
form#smileys input[type = "radio"]:checked {
  filter: grayscale(0);
}

form#smileys input[type = "radio"]:focus {
  outline: 0;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel = "stylesheet" />
<form id = "smileys">
  <input type = "radio" name = "smiley" id = "frown" value = "frown" class = "fa-face-frown fa-2xl fa-regular">
  <input type = "radio" name = "smiley" id = "eye-roll" value = "eye-roll" class = "fa-regular fa-face-rolling-eyes fa-2xl">
  <input type = "radio" name = "smiley" id = "neutral" value = "neutral" class = "fa-regular fa-face-meh fa-2xl">
  <input type = "radio" name = "smiley" id = "smile-wink" value = "smile-wink" class = "fa-regular fa-face-smile-wink fa-2xl">
  <input type = "radio" name = "smiley" id = "happy" value = "happy" class = "fa-regular fa-face-laugh-beam fa-2xl">
</form>

20.04.2023 10:45

Другие вопросы по теме

JQuery для обработки события клика

Снимите отметку с дочерних флажков в других группах при установке нескольких дочерних флажков в текущей группе

Отображать цену woocommerce в кнопке «Добавить в корзину»

Как объединить селектор jquery с «этим»

Как изменить группу строк Datatables, чтобы разрешить только 1 открытую группу?

Как отсортировать массив с помощью JavaScript, если в нем есть разные типы данных?

Создание поля ввода для приема буквенно-цифровых символов

ToggleClass не работает с display:block

Onclick для каждой кнопки добавить/удалить класс из атрибута в документ HTML

Как закрыть showModal(), когда кто-то щелкает снаружи

Изменить класс переключателя при проверке с помощью jQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы