如何实现点击单个按钮依次修改多个圆形div的背景颜色？

现有代码问题 #

• 你在循环中重复给按钮绑定了5次相同的点击事件，每次点击按钮都会同时触发5次处理逻辑，直接把所有圆形的背景都改成了红色
• 没有声明记录点击次数的状态变量，无法匹配每次点击对应的圆形下标

实现思路 #

1. 初始化一个计数变量，初始值为0，用来记录当前需要修改的圆形下标
2. 只给按钮绑定1次点击事件，每次触发时执行以下逻辑：
   • 获取所有圆形元素的集合
   • 用当前计数作为下标，取出对应位置的圆形元素，修改背景色
   • 计数自增1，可根据需求增加边界判断：如果计数超过圆形总数量，要么重置为0从头开始循环修改，要么终止后续修改操作

修改后的JS代码 #

$(document).ready(function () {
    // 初始化点击计数
    let clickCount = 0;
    // 缓存所有圆形元素，避免每次点击都重新查询DOM
    const $circles = $('.circle1');
    // 总圆形数量
    const totalCircles = $circles.length;

    $('.redBg').click(function () {
        // 如果已经改完所有圆形，可根据需求调整：比如重置计数从头开始，或者直接return不处理
        if (clickCount >= totalCircles) {
            // 示例：重置计数可以循环改色
            clickCount = 0;
            // 如果不需要循环，就写return; 即可
        }
        // 修改对应下标的圆形背景色
        $circles.eq(clickCount).css('background-color', 'red');
        // 计数自增
        clickCount++;
    });
});

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