使用Javascript

Question

我一直在使用此脚本在点击时切换CSS背景颜色，我正在尝试添加第三种颜色选项但似乎无法使其正常工作。任何人都可以帮助让第三种颜色起作用吗？

这是我的jsfiddle链接：

https://jsfiddle.net/pkrWV/70/

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    if(index === 0){
        index = 1;
    }else{
        index = 0;
    }
}

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}

谢谢，

詹姆斯

Answer 1

您可以使用模数运算符（％）：

function updateIndex(){
    index = (index+1)%(className.length);   
}

JSFiddle：https://jsfiddle.net/pkrWV/71/

Answer 2

https://jsfiddle.net/pkrWV/72/

function updateIndex(){
    if(index === className.length-1){
        index = 0;
    }else{
        index = index+1;
    }
}

Answer 3

试试这个jsfiddle：

three colors

<div ng-app="TourSearchApp">
    <form ng-controller="SearchFilterCtrl">
       <select ng-model="country" ng-options="item.id as item.name for item in countries">
            <option value="">Choose country</option>
        </select>
    </form>
</div>

<script>
    var app = angular.module('TourSearchApp', []);

    app.controller('SearchFilterCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {        
        $http.get('/api/countries/').success(function(data) {
            $scope.countries = data;
        });

        $scope.country = $location.search()['country'];  // (1)
        $scope.$watch('country', function(newValue) {  // (2)
            $location.search('country', newValue);
        });
    }]);
</script>