JavaScript 中怎么用 DOM 操作实现一个星级评分交互效果-js教程-PHP中文网

用原生DOM操作实现星级评分：监听鼠标点击和悬停事件，动态添加active/hover类更新星星样式，通过data-value读取分数并存入隐藏域；父容器mouseleave清除悬停态，确保状态清晰。

javascript 中怎么用 dom 操作实现一个星级评分交互效果

用 DOM 操作实现星级评分，核心是监听鼠标事件、动态更新样式、记录选中值。不需要框架，纯原生 JS 就能完成，关键是正确绑定事件、区分“悬停”和“点击”状态，并持久化用户选择。

HTML 结构：用 span 或 i 标签表示星星

推荐用语义清晰、易操作的结构，例如：

<div class="star-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>
<input type="hidden" id="rating-value" value="">

每个 span 带 data-value 属性，方便读取分数；隐藏域用于后续提交或存储。

CSS 样式：控制默认态、悬停态和选中态

基础样式示例（可替换为 Font Awesome 图标或背景图）：

.star {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
}
.star.active { color: #ffc107; }
.star.hover { color: #ffca4a; }
/* 防止文字被选中干扰交互 */
.star-rating { user-select: none; }

注意：transition 让颜色变化更自然；user-select: none 避免双击误选文字。

JavaScript 逻辑：监听事件并更新状态

完整 DOM 操作脚本（含注释）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const stars = document.querySelectorAll('.star');
const hiddenInput = document.getElementById('rating-value');
<p>// 点击时记录分数，并高亮到当前星及之前所有星
stars.forEach(star => {
star.addEventListener('click', () => {
const value = parseInt(star.dataset.value);
hiddenInput.value = value;</p><pre class="brush:php;toolbar:false;">stars.forEach((s, i) => {
  if (i <p>});</p><p>// 鼠标移入时预览（只影响视觉，不改变最终值）
star.addEventListener('mouseenter', () => {
const value = parseInt(star.dataset.value);
stars.forEach((s, i) => {
if (i </p><p>// 移出容器时清除悬停态（避免残留）
star.parentElement.addEventListener('mouseleave', () => {
stars.forEach(s => s.classList.remove('hover'));
});
});</p>

关键点：