js实现评分

2026-03-01 04:19:52JavaScript

实现评分功能的基本方法

在JavaScript中实现评分功能通常涉及创建交互式星级评分组件。以下是常见的实现方式：

HTML结构

<div class="rating">
  <span class="star" data-value="1">★</span>
  <span class="star" data-value="2">★</span>
  <span class="star" data-value="3">★</span>
  <span class="star" data-value="4">★</span>
  <span class="star" data-value="5">★</span>
</div>
<p>当前评分: <span id="rating-value">0</span></p>

CSS样式

.star {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.star.active {
  color: #ffcc00;
}

JavaScript逻辑

const stars = document.querySelectorAll('.star');
const ratingValue = document.getElementById('rating-value');

stars.forEach(star => {
  star.addEventListener('click', () => {
    const value = parseInt(star.getAttribute('data-value'));
    ratingValue.textContent = value;

    stars.forEach(s => {
      s.classList.toggle('active', 
        parseInt(s.getAttribute('data-value')) <= value
      );
    });
  });
});

支持鼠标悬停效果的实现

增强用户体验可以添加鼠标悬停预览功能：

let currentHover = 0;

stars.forEach(star => {
  star.addEventListener('mouseover', () => {
    currentHover = parseInt(star.getAttribute('data-value'));
    updateStars();
  });

  star.addEventListener('mouseout', () => {
    currentHover = 0;
    updateStars();
  });
});

function updateStars() {
  const currentRating = parseInt(ratingValue.textContent);
  stars.forEach(star => {
    const value = parseInt(star.getAttribute('data-value'));
    star.classList.toggle('active', 
      value <= (currentHover || currentRating)
    );
  });
}

表单集成方法

如需将评分结果提交到表单：

<form id="rating-form">
  <input type="hidden" name="rating" id="rating-input" value="0">
  <!-- 其他表单字段 -->
  <button type="submit">提交评分</button>
</form>

document.getElementById('rating-form').addEventListener('submit', (e) => {
  document.getElementById('rating-input').value = 
    document.getElementById('rating-value').textContent;
});

使用第三方库的简化方案

对于更复杂的评分需求，可以考虑使用现有库：

RateYo: 轻量级jQuery插件
Starability.css: 纯CSS解决方案
Rater.js: 纯JavaScript库

安装RateYo示例：

npm install rateyo

使用示例：

import $ from 'jquery';
import 'rateyo/src/jquery.rateyo';

$("#rating").rateYo({
  rating: 3.6,
  halfStar: true,
  onChange: function(rating) {
    $("#rating-value").text(rating);
  }
});

无障碍访问优化

确保评分组件对屏幕阅读器友好：

js实现评分

<div class="rating" role="radiogroup" aria-labelledby="rating-label">
  <span id="rating-label">请评分</span>
  <span class="star" role="radio" aria-checked="false" data-value="1">★</span>
  <!-- 其他星星 -->
</div>

stars.forEach(star => {
  star.addEventListener('click', () => {
    stars.forEach(s => {
      s.setAttribute('aria-checked', 
        s === star || parseInt(s.getAttribute('data-value')) < 
        parseInt(star.getAttribute('data-value'))
      );
    });
  });
});

这些实现方案覆盖了从基础到高级的评分功能需求，可根据具体项目要求选择合适的实现方式。