优化jQuery点赞/差评评分脚本：代码精简与状态切换求助

现存问题 #

• 代码存在大量重复逻辑，结构冗余
• 点击已激活的点赞/差评图标时，无法移除active类和实心图标样式，恢复中性状态

优化后的JavaScript代码 #

// 统一处理点赞/差评点击事件
$('.rating .like, .rating .dislike').on('click', function(e) {
  e.preventDefault();
  const $el = $(this);
  const type = $el.data('type'); // 获取当前点击的类型：like/dislike
  const isActive = $el.hasClass(`${type}-active`);

  // 重置所有状态：移除active类，恢复空心图标
  $('.like-active, .dislike-active').removeClass('like-active dislike-active');
  $('.rating i').removeClass('fa-solid').addClass('fa-regular');

  // 如果当前元素未激活，则设置为激活状态
  if (!isActive) {
    $el.addClass(`${type}-active`);
    $el.find('i').removeClass('fa-regular').addClass('fa-solid');
  }
});

优化后的CSS代码 #

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

.rating {
  display: block;
  opacity: 0;
  width: 20em;
  height: 5em;
  text-align: center;
  transition: opacity .25s ease-in-out;
}

.rating:hover {
  opacity: 1;
}

.like,
.dislike {
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
}

.like:hover,
.dislike:hover,
.like-active,
.dislike-active {
  opacity: 1;
  transform: scale(1.1);
}

.like:hover,
.like-active {
  color: #349837;
}

.dislike:hover,
.dislike-active {
  color: #D82D05;
}

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

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

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

优化后的HTML代码 #

<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" data-type="like">
    <i class="fa-regular fa-thumbs-up fa-3x" aria-hidden="true"></i>
  </div>
  <div class="dislike grow" data-type="dislike">
    <i class="fa-regular fa-thumbs-down fa-3x" aria-hidden="true"></i>
  </div>
  <span class="tooltip t-like">Yay</span>
  <span class="tooltip t-dislike">Nay</span>
</div>

关键优化说明 #

1. 代码结构精简

   • 将两个独立点击事件合并为一个，通过data-type属性区分操作类型，消除重复逻辑
   • 统一编写状态重置代码，避免重复执行移除类、切换图标等操作

2. 状态切换修复

   • 新增激活状态判断：点击元素时先检查是否已处于激活状态，若是则仅执行重置逻辑，不添加新状态
   • 全局重置所有图标样式，确保切换时无样式残留

3. CSS冗余消除

   • 合并hover与active状态的公共样式（透明度、缩放效果），减少重复代码
   • 简化过渡属性写法，移除不必要的浏览器前缀

内容的提问来源于stack exchange，提问作者Julia Galden