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

【问题标题】：How to make a cycling variable src attribute for an image in HTML with JavaScript如何使用 JavaScript 为 HTML 中的图像创建循环变量 src 属性
【发布时间】：2016-05-03 21:45:17
【问题描述】：

所以我做了这个代码：

<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>

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

【问题讨论】：

你可以使用更多的角度逻辑，设置一个控制器然后使用角度ng-src指令来实现这一点。现在你正在混合和匹配普通的 js dom 选择和角度。你可以很容易地用纯角度做这种事情，并且你已经设置了应用程序。

标签： javascript html angularjs variables src

【解决方案1】：

您可以使用已经加载到页面上的 Angular 来帮助您，从而让自己更轻松。如果你不打算利用它，那么加载像 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 来正确评估图像位置，使用你正在旋转的数组和索引。

【讨论】：

哇，谢谢老兄，我不会撒谎，我什至不知道 ng-src 存在，可能应该考虑这样的事情。
@AzrielBowles 没问题，很高兴我能帮上忙。 Angular 也有很多，可能需要一些时间来学习，但是它有很多工具可以处理很多问题！如果此解决方案对您有效，请标记为正确，以便问题不再开放。