页面多商品星级评分联动异常问题求助

问题描述 #

用foreach循环渲染商品列表及星级评分组件时出现以下问题：

• 首次点击第一个商品的星级，功能正常；
• 点击后续商品的星级时，会修改第一个商品的星级状态。
  尝试给星级容器添加新类无效，不清楚如何为每个商品的星级容器设置独立标识以隔离状态。

原代码 #

HTML（Razor语法） #

@foreach (var purchase in purchaseHistories)
{
    <div class="card rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="row d-flex justify-content-between align-items-center">
                <div class="col-md-2 col-lg-2 col-xl-2">
                    <img src="@purchase.ImageUrl" alt="@purchase.Name" class="img-fluid rounded-3" >
                </div>
                
                <div class="col-md-3 col-lg-3 col-xl-3">
                    <p class="lead fw-normal mb-2">@purchase.Name</p>
                    <p><span class="text-muted">@purchase.Description</span></p>
                    <p><span class="text-muted">Purchased On: @purchase.PurchaseDate</span></p>
                    <p><span class="text-muted">Quantity: @purchase.Quantity</span></p>
                    <button type="button" class="btn btn-primary">Download</button>
                </div>
                
                <div class="col-md-3 col-lg-3 col-xl-2 d-flex flex-column">
                    <div class="star-rating-container">
                        <label for="star">Review:</label>
                        <div>
                            <button class="star" type="button">&#9734;</button>
                            <button class="star" type="button">&#9734;</button>
                            <button class="star" type="button">&#9734;</button>
                            <button class="star" type="button">&#9734;</button>
                            <button class="star" type="button">&#9734;</button>
                        </div>
                    </div>
                    
                    <label for="Activation Code">Activation Code: </label>
                    <select class="form-select" aria-label="Activation Code">
                        @{
                            var split = purchase.ActivationCode.Split(",");
                            var val = 0;
                        }
                        
                        @for (int i = 0; i < split.Length; i++)
                        {
                            if (i == 0)
                            {
                                <option selected>@split[i]</option>
                            }
                            else
                            {
                                val += 1;
                                <option value="@val">@split[i]</option>
                            }
                        }
                    </select>
                </div>
            </div>
        </div>
    </div>
}

JavaScript #

const products=document.querySelectorAll('.product')

const allstars = document.querySelectorAll('.star');
allstars.forEach((star, i) => {
    star.onclick = function () {
        let currentstar = i + 1;
        console.log(currentstar);

        allstars.forEach((star, j) => {
            if (currentstar >= j + 1) {
                star.innerHTML = '&#9733';
            } else {
                star.innerHTML = '&#9734';
            }
        })
    }
})

问题根源 #

你的JavaScript代码把页面上所有.star元素当成了一个全局集合，点击任何一颗星都会遍历修改所有星星的状态，而不是当前商品对应的星星组，导致状态混乱。

解决方案 #

1. 给每个星级容器添加唯一标识（可选但推荐） #

在Razor循环中，给每个star-rating-container添加基于商品ID的自定义属性，方便后续关联商品：

<div class="star-rating-container" data-product-id="@purchase.Id">

2. 修改HTML结构（优化星星组的层级） #

给星星包裹一个独立的父容器，方便精准获取当前商品的星星组：

<div class="star-rating-container" data-product-id="@purchase.Id">
    <label>Review:</label>
    <!-- 新增star-group类，明确星星组范围 -->
    <div class="star-group">
        <button class="star" type="button">&#9734;</button>
        <button class="star" type="button">&#9734;</button>
        <button class="star" type="button">&#9734;</button>
        <button class="star" type="button">&#9734;</button>
        <button class="star" type="button">&#9734;</button>
    </div>
</div>

注：移除了for="star"属性，避免多个label绑定同一个不存在的id导致的语义冲突。

3. 重写JavaScript逻辑，实现状态隔离 #

核心思路：点击星星时，先找到它所属的当前商品星级容器，只修改该容器内的星星，不影响其他商品：

// 获取所有星级容器
const ratingContainers = document.querySelectorAll('.star-rating-container');

ratingContainers.forEach(container => {
    // 获取当前容器内的所有星星
    const stars = container.querySelectorAll('.star');
    
    stars.forEach((star, index) => {
        star.addEventListener('click', () => {
            const selectedCount = index + 1;
            
            // 仅遍历当前容器内的星星，修改状态
            stars.forEach((s, sIndex) => {
                s.innerHTML = selectedCount >= sIndex + 1 ? '★' : '☆';
            });

            // 可选：如果需要提交评分，这里可以获取商品ID
            // const productId = container.dataset.productId;
            // console.log(`商品${productId}的评分为${selectedCount}星`);
        });
    });
});

4. 可选优化：用CSS类控制星级样式 #

比起修改innerHTML，用CSS类控制样式更灵活易维护：

.star {
    cursor: pointer;
    font-size: 1.2rem;
}
.star.active {
    color: #ffc107;
    content: '★';
}

对应的JavaScript修改为：

stars.forEach((s, sIndex) => {
    if (selectedCount >= sIndex + 1) {
        s.classList.add('active');
        s.innerHTML = '★';
    } else {
        s.classList.remove('active');
        s.innerHTML = '☆';
    }
});

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