Question

所以我制作了这段代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <h1> Some Traffic Lights</h1>

  <div ng-app="myApp" ng-controller="myCtrl">

    <img id="trafficLight" src="TLgre.png" />

    <script>
      var app = angular.module('myApp', []);

       //*****Declaring Variables*****//

      var lightSrcs = ['TLgre.png', 'TLyel.png', 'TLred.png'];
      var cycleNumber = 0;
      var Order = 0;

       //*****Number Cycling Function*****//

      function cycle() {
        if (Order === 0) {
          if (cycleNumber == 3) {
            cycleNumber -= 1;
            Order = 1;
          } else {
            cycleNumber += 1;
          }
        } else if (Order === 1) {
          if (cycleNumber <= 0) {
            cycleNumber += 1;
            Order = 0;
          } else {
            cycleNumber -= 1;
          }
        }
        return cycleNumber;
      }
    </script>

    <button type="button" onclick="document.getElementById('trafficLight').src = lightSrcs[cycle()];">
      Click to cycle lights</button>
  </div>

</body>

</html>

＆＃13;

而且我不知道为什么它不起作用。我确实有两个猜测，一个是我无法在onclick事件中运行JavaScript，或者它不允许我使用脚本标记中的函数。我的另一个猜测是，src属性不能作为变量给出，这听起来很奇怪，这可能就是为什么我感到困惑。如果有人能告诉我我做错了什么会很好，我会对如何改进它提出任何建议，（我也知道一点AngularJS），只有一件事，它必须在阵列中有我想要的三个图像。我不知道为什么，但我的老师说他们必须这样做。

Answer 1

您可以使用页面上已加载的角度来帮助您，让自己更轻松。如果您不打算利用它，那么加载像angular这样的更大的框架是没有意义的。:)

无论如何，您正在寻找的是这样的：https://plnkr.co/edit/06xChEaDyOEQ89aJktfR?p=preview

你可以改变你的img和按钮，使用ng-click和ng-src角度逻辑，如下所示：

<img id="trafficLight" ng-src="{{lightSrcs[currentSelection]}}"></img>

<button type="button" ng-click="cycleLights()" >

然后在控制器中，您可以执行以下操作：

$scope.lightSrcs = ['TLgre.png', 'TLyel.png', 'TLred.png'];
$scope.currentSelection = 0;

$scope.cycleLights = function(){
if($scope.currentSelection === 2) {
  $scope.currentSelection = 0;
} else {
  $scope.currentSelection += 1;
}

};

使用数组时，有比这更优雅的方法，但为了举个例子，我将使用你现有的逻辑。所以你在按钮上有ng-click，它在你的控制器中调用$ scope函数。然后，您可以旋转该功能中的计数。然后使用img上的ng-src使角度正确评估图像位置，使用您正在旋转的数组和索引。

如何使用JavaScript为HTML中的图像创建循环变量src属性

1 个答案: