我创建了一个简单的脚本，它应该为特定的元素提供评级。它是基于拇指向上/向下。我的代码工作正常大部分，但我无法：
1.使代码更清晰
1.从一个已经点击过的元素中删除active类（所以这是一个场景，当一个thumb是绿色或红色，点击那个颜色thumb之后，它将变成中性;TL;DR是关于删除实体填充和活动类）

$('.like').on('click', function() {
  event.preventDefault();
  $('.like-active').removeClass('like-active');
  $('.dislike-active').removeClass('dislike-active');
  $('.like .fa-regular').toggleClass('fa-solid').removeClass('fa-regular');
  $('.dislike .fa-solid').toggleClass('fa-regular').removeClass('fa-solid');
  $(this).toggleClass('like-active');
  $(".like").not(this).removeClass("like-active");
});

$('.dislike').on('click', function() {
  event.preventDefault();
  $('.dislike-active').removeClass('like-active');
  $('.like-active').removeClass('like-active');
  $('.dislike .fa-regular').addClass('fa-solid').removeClass('fa-regular');
  $('.like .fa-solid').addClass('fa-regular').removeClass('fa-solid');
  $(this).toggleClass('dislike-active');
  $(".like").not(this).removeClass("dislike-active");
});

body {
  font-family: 'Poppins';
  font-size: 12px;
}

.rating {
  display: block;
  opacity: 0;
  width: 20em;
  height: 5em;
  text-align: center;
}

.rating:hover {
  opacity: 1;
  -webkit-transition: opacity .25s ease-in-out .0s;
  transition: opacity .25s ease-in-out .0s;
}

.like,
.dislike {
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  opacity: 0.5;
}

.dislike:hover,
.like:hover {
  opacity: 1;
  transition: all 0.2s ease-in-out;
  transform: scale(1.1);
}

.like:hover {
  color: #349837;
}

.dislike:hover {
  color: #D82D05;
}

.like-active {
  color: #349837;
}

.dislike-active {
  color: #D82D05;
}

.tooltip {
  background: #f2f2f2;
  color: #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 2em;
  width: 10em;
  margin: 0 auto 0.5em auto;
  line-height: 2em;
}

.like:hover~.t-like {
  display: block;
}

.dislike:hover~.t-dislike {
  display: block;
}

.t-like,
.t-dislike {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
<div class="rating">
  <div class="like grow">
    <i class="fa-regular fa-thumbs-up fa-3x like" aria-hidden="true"></i>
  </div>
  <div class="dislike grow">
    <i class="fa-regular fa-thumbs-down fa-3x dislike" aria-hidden="true"></i>
  </div>
  <span class="tooltip t-like">Yay</span>
  <span class="tooltip t-dislike">Nay</span>
</div>

JSFIDDLE
谢谢你的帮助。