AngularJS实现仅第25个按钮点击后改变背景色的问题求助

嘿，我懂你遇到的麻烦啦！你现在的问题肯定是用了全局状态变量来控制所有按钮的样式，所以一点击第25个按钮，所有按钮都会跟着切换背景色。咱们换个思路，给每个按钮单独维护状态就搞定了！

问题根源 #

你大概率是给所有按钮绑定了同一个$scope变量（比如$scope.isRed），一旦这个变量改变，所有绑定它的按钮都会同步更新样式——这就是为啥所有按钮一起变色的原因。

解决方案：给每个按钮单独维护状态 #

咱们用一个数组来存储每个按钮的状态，数组索引对应按钮的序号，这样只有被点击的目标按钮（第25个）才会触发样式变化，同时还能保留你的3次点击机会规则。

修改后的完整代码 #

<html ng-app="Bluebox">
<head>
    <title>BlueBox</title>
    <script src="angular.js"></script>
    <style>
        .red { background-color: brown; }
        button { margin: 5px; padding: 10px; }
        .disabled { opacity: 0.5; cursor: not-allowed; }
    </style>
</head>
<body ng-controller="BoxController">
    <!-- 循环生成50个按钮 -->
    <button 
        ng-repeat="btn in buttons track by $index"
        ng-class="{'red': buttonStates[$index], 'disabled': clickCount <= 0 || buttonStates[24]}"
        ng-click="handleButtonClick($index)"
        ng-disabled="clickCount <= 0 || buttonStates[24]"
    >
        按钮 {{$index + 1}}
    </button>
    <p>剩余点击次数：{{clickCount}}</p>
    <p ng-if="buttonStates[24]">恭喜你，获胜啦！</p>
    <p ng-if="clickCount <= 0 && !buttonStates[24]">游戏结束，你失败了...</p>

    <script>
        angular.module('Bluebox', [])
        .controller('BoxController', function($scope) {
            // 初始化50个按钮的状态数组，默认都是false（未变色）
            $scope.buttonStates = new Array(50).fill(false);
            // 初始化可点击次数
            $scope.clickCount = 3;
            // 生成按钮列表（用来循环，也可以直接循环数字）
            $scope.buttons = new Array(50);

            $scope.handleButtonClick = function(index) {
                // 如果已经赢了或者次数用完，直接返回
                if ($scope.clickCount <= 0 || $scope.buttonStates[24]) return;

                // 减少点击次数
                $scope.clickCount--;

                // 判断是否点击的是第25个按钮（注意数组索引从0开始，所以是24）
                if (index === 24) {
                    // 只把第25个按钮的状态设为true，触发样式变化
                    $scope.buttonStates[index] = true;
                }
            };
        });
    </script>
</body>
</html>

关键修改点解释 #

• 状态数组buttonStates：用长度为50的数组存储每个按钮的样式状态，每个索引对应一个按钮，只有目标按钮（索引24）被点击时，才会把对应位置设为true。
• ng-class绑定：每个按钮绑定buttonStates[$index]，这样只有自身状态为true时才会加上red类。
• 点击逻辑优化：添加了游戏结束的判断（次数用完或已获胜时禁用按钮），同时保留了3次点击机会的规则。
• 按钮禁用：用ng-disabled控制按钮是否可点击，避免玩家在游戏结束后继续点击。

这样修改后，点击第25个按钮时，只有它自己会变成棕色背景，其他按钮完全不受影响，完美符合你的需求哦！

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