Question

我制作了一款有50个按钮的游戏。您有三次尝试单击按钮。如果你点击了正确的那个，那就是你赢得比赛的第25个！我希望在点击时只更改按钮no.25背景颜色。怎么做。单击第25个按钮时，我的程序会更改所有按钮的颜色。

 <html ng-app="Bluebox">

 <head>
   <title>BlueBox</title>
  <script src="angular.js"></script>
  <style>
     .red{
         background-color:brown;
     }
   </style>
   </head>
  <body>
  <div ng-controller="BoxController">

        <strong  ng-repeat="x in boxes track by $index">
                <button ng-style="{'color':x.color}" ng-class="bgcolor" ng-
    click="pressed($index)" type="button">
                    Button {{x.Id}}
          </button>
        </strong>

  </div>

  <script>
    angular.module("Bluebox",[])
           .controller("BoxController",
    ["$scope","$log",function($scope,$log){


             var limit = 50;
  var arr = []; // populate in your controller
  for (var index = 0; index <= limit; index++) {


    arr.push({
     "color":"green",
      "Id": index
      })
   }


  $scope.boxes = arr;
  $scope.tries=3;

  $scope.pressed = function(index){

    if($scope.tries<=3 & $scope.tries!=0){
    $log.log("Button "+(index)+" was pressed");
   $scope.tries=$scope.tries-1;

    if(index==25){

        $scope.bgcolor="red";
        $log.log("you won the game");
        $scope.tries=0;
    }

    if($scope.tries==0 && index!=25){
        $log.log("you lost the game");
     }

     }

     else{
         $log.log("Please restart the game");
     }
    }

    }])
  </script>
 </body>

 </html>

Answer 1

只需将课程bgcolor添加到第25个按钮，然后将win标记设置为ng-class="{bgcolor: ($index==24 && win)}"，这样就可以解决您的问题。

if (index == 25) {
          $scope.win = true;

目前，您正在向所有错误按钮添加bgcolor。

angular.module("Bluebox", [])
  .controller("BoxController", ["$scope", "$log", function($scope, $log) {


    var limit = 50;
    var arr = []; // populate in your controller
    for (var index = 0; index <= limit; index++) {


      arr.push({
        "color": "green",
        "Id": index
      })
    }


    $scope.boxes = arr;
    $scope.tries = 3;
    $scope.win = false;


    $scope.pressed = function(index, event) {

      if ($scope.tries <= 3 & $scope.tries != 0) {
        $log.log("Button " + (index) + " was pressed");
        $scope.tries = $scope.tries - 1;

        if (index == 25) {
          $scope.win = true;
          $scope.bgcolor = "red";
          $log.log("you won the game");
          $scope.tries = 0;
          angular.element(event.currentTarget).addClass('red')
        }

        if ($scope.tries == 0 && index != 25) {
          $log.log("you lost the game");
        }

      } else {
        $log.log("Please restart the game");
      }
    }

  }])

.red {
  background-color: brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="Bluebox">

<head>
  <title>BlueBox</title>
  <script src="angular.js"></script>

</head>

<body>
  <div ng-controller="BoxController">

    <strong ng-repeat="x in boxes track by $index">
         <button ng-style="{'color':x.color}" ng-class="{bgcolor: ($index == 24 && win)}"
        
         ng-click="pressed($index, $event)"   type="button">
                        Button {{x.Id}}
              </button>
            </strong>

  </div>

</body>

</html>

 <strong  ng-repeat="x in boxes track by $index">
     <button ng-style="{'color':x.color}" ng-class="{bgcolor: $index==24}" ng-click="pressed($index)" type="button"> Button {{x.Id}}
     </button>
 </strong>

Answer 2

嗯，这就是我要做的。您可以抓住点击的event并将style/class添加到该特定点击元素。

我喜欢JS所以这可以用同样的方式实现。

angular.element()允许您选择DOM上的元素，并且可以传递对angular.element(reference)的任何引用以选择DOM元素。例如，event.currentTarget在这种情况下为您提供了clicked元素的引用，您可以使用传统的JS/Jquery来执行其他操作。

希望这有帮助

由于

＆＃13;

angular.module("Bluebox",[])
           .controller("BoxController",
    ["$scope","$log","$timeout",function($scope,$log,$timeout){


             var limit = 50;
  var arr = []; // populate in your controller
  for (var index = 0; index <= limit; index++) {


    arr.push({
     "color":"green",
      "Id": index
      })
   }

 
  $scope.boxes = arr;
  $scope.tries=3;
  
  $scope.won = false;
  $scope.pressed = function(index,event){

    if($scope.tries<=3 & $scope.tries!=0){
    $log.log("Button "+(index)+" was pressed");
   $scope.tries=$scope.tries-1;
   
    if(index==25){

        $scope.bgcolor="red";
        $log.log("you won the game");
        $scope.tries=0;
        $scope.won = true;
        angular.element(event.currentTarget).addClass('red')
    }

    if($scope.tries==0 && index!=25){
        $log.log("you lost the game");
     }

     }

     else{
         $log.log("Please restart the game");
     }
    }

    }])

＆＃13;

.red{
         background-color:brown;
     }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="Bluebox" ng-cloak>

 <head>
   <title>BlueBox</title>
  <script src="angular.js"></script>

   </head>
  <body>
  <div ng-controller="BoxController">

    <strong  ng-repeat="x in boxes track by $index">
     <button ng-style="{'color':x.color}" 
    
     ng-click="pressed($index, $event)"   type="button">
                    Button {{x.Id}}
          </button>
        </strong>
 
 <h1 ng-show="won">You won</h1>
  </div>
 
 

  
 </body>

 </html>

＆＃13;

从angularjs中的多个按钮中仅更改特定按钮的背景颜色

2 个答案: