如何使用 JavaScript 為 HTML 中的圖像創建循環變量 src 屬性

Question

所以我做了這個代碼：

 <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，或者它不允許我從此使用腳本標記中的函數。 我的另一個猜測是 src 屬性不能作為變量給出，這聽起來很奇怪，可能是為什么我很困惑。 如果有人能告訴我我做錯了什么，那就太好了，我願意接受有關如何改進它的任何建議（我也知道一點 AngularJS），只有一件事，它必須包含三個圖像我想要一個數組。 我也不知道為什么，但我的老師說他們必須這樣做。

Answer 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來正確評估圖像位置，使用你正在旋轉的數組和索引。

如何使用 JavaScript 為 HTML 中的圖像創建循環變量 src 屬性

問題描述

1 個解決方案

解決方案1
0 2016-05-03 13:33:14

如何使用 JavaScript 為 HTML 中的圖像創建循環變量 src 屬性

問題描述

1 個解決方案

解決方案1 0 2016-05-03 13:33:14

解決方案1
0 2016-05-03 13:33:14