在多次单击jquery后更改多个按钮的颜色

jQuery 多次点击后更改多个按钮颜色解决方案

基础概念

在 jQuery 中处理多个按钮的点击事件并改变它们的颜色，涉及到事件处理、DOM 操作和状态管理。当用户多次点击按钮时，我们需要跟踪每个按钮的状态并相应地改变其样式。

解决方案

以下是完整的解决方案代码：

<!DOCTYPE html>
<html>
<head>
    <title>多按钮点击变色</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .btn {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            cursor: pointer;
            background-color: #f0f0f0;
        }
        .active {
            background-color: #4CAF50;
            color: white;
        }
        .inactive {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
    <button class="btn">按钮4</button>

    <script>
        $(document).ready(function() {
            // 为所有按钮添加点击事件
            $('.btn').click(function() {
                // 获取当前按钮的点击次数数据属性
                let clickCount = $(this).data('click-count') || 0;
                clickCount++;
                $(this).data('click-count', clickCount);
                
                // 根据点击次数改变按钮样式
                if (clickCount % 3 === 0) {
                    $(this).removeClass('active').addClass('inactive');
                } else if (clickCount % 3 === 1) {
                    $(this).removeClass('inactive').addClass('active');
                } else {
                    $(this).removeClass('active inactive');
                }
            });
        });
    </script>
</body>
</html>

代码说明

HTML 结构：创建了多个具有相同类名 btn 的按钮
CSS 样式：定义了按钮的默认样式和两种状态样式（active 和 inactive）
jQuery 逻辑：
- 为所有 .btn 元素绑定点击事件
- 使用 data() 方法存储每个按钮的点击次数
- 根据点击次数的模3结果改变按钮样式：
  - 第一次点击：添加 active 类（绿色）
  - 第二次点击：移除所有状态类（恢复默认）
  - 第三次点击：添加 inactive 类（红色）
  - 第四次点击：循环回到第一次的状态

变体方案

如果需要不同的行为模式，可以修改条件判断部分。例如：

// 交替切换两种状态
$('.btn').click(function() {
    $(this).toggleClass('active inactive');
});

// 循环切换多种颜色
$('.btn').click(function() {
    const colors = ['red', 'green', 'blue', 'yellow'];
    let currentColor = $(this).data('current-color') || 0;
    currentColor = (currentColor + 1) % colors.length;
    $(this).data('current-color', currentColor);
    $(this).css('background-color', colors[currentColor]);
});