Javascript 按顺序切换元素-显示一个，然后隐藏它并显示下一个

假设我们有10盏灯（

我们使用li标签

）。我想一个接一个地向他们展示：

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul>
        <li class="dot">     
        </li>
         <li class="dot">     
        </li>        
        <li class="dot">     
        </li>                    
        <li class="dot">     
        </li>          
        <li class="dot">     
        </li>          
        <li class="dot">     
        </li>          
        <li class="dot">     
        </li>  

    </ul>
</div>    

灯光

第一盏灯亮着

主题的其余部分=关闭

之后

第二盏灯亮

第一个灯和其他灯=关闭

我怎样才能做到这一点

---

Fiddle:

第一个示例在每次单击按钮时手动切换元素

这是另一个版本，其中灯光会自动移动，并可通过按钮停止和重新启动：

---

第一个示例在每次单击按钮时手动切换元素

这是另一个版本，其中灯光会自动移动，并可通过按钮停止和重新启动：

---

实际上，这一定是一个小的开发练习，你被分配在课堂上做。所以，我通常不会回答这类问题。然而，由于我心情愉快，我刚刚更新了你的JSFIDLE

但一定要尽你最大的努力自己解决这个问题。有1000种方法可以实现这一点。但下面是一个简单的答案

function MyCtrl($scope) {
$scope.activeLight = 3;
$scope.data = [1,2,3,4,5,6,7];
$scope.update = function(index) {
    $scope.activeLight = index;
};

---

实际上，这一定是一个小的开发练习，你被分配在课堂上做。所以，我通常不会回答这类问题。然而，由于我心情愉快，我刚刚更新了你的JSFIDLE

但一定要尽你最大的努力自己解决这个问题。有1000种方法可以实现这一点。但下面是一个简单的答案

function MyCtrl($scope) {
$scope.activeLight = 3;
$scope.data = [1,2,3,4,5,6,7];
$scope.update = function(index) {
    $scope.activeLight = index;
};

---

您可以使用

$timeout

延迟点灯。正如你们将看到的，我使用一个递归函数来做

控制器

function MyCtrl($scope, $timeout) {
    $scope.lights = [0,1,2,3,4,5,6];
    $scope.currentLight = 0;

    function light(index){
        if($scope.lights.length < index) {
            light(0);
        } else {
            $scope.currentLight = index;
            $timeout(function(){
                light(++index);
            }, 1000);
        }
    }

    light(0);
}

函数MyCtrl（$scope，$timeout）{
$scope.lights=[0,1,2,3,4,5,6]；
$scope.currentLight=0；
功能灯（索引）{
如果（$scope.lights.length<索引）{
光（0）；
}否则{
$scope.currentLight=索引；
$timeout（函数（）{
光（++指数）；
}, 1000);
}
}
光（0）；
}

HTML

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul ng-repeat="light in lights">
        <li class="dot" ng-class="{'red': $index == currentLight}">     
        </li> 
    </ul>
</div>

灯光

您可以使用

$timeout

延迟点灯。正如你们将看到的，我使用一个递归函数来做

控制器

function MyCtrl($scope, $timeout) {
    $scope.lights = [0,1,2,3,4,5,6];
    $scope.currentLight = 0;

    function light(index){
        if($scope.lights.length < index) {
            light(0);
        } else {
            $scope.currentLight = index;
            $timeout(function(){
                light(++index);
            }, 1000);
        }
    }

    light(0);
}

函数MyCtrl（$scope，$timeout）{
$scope.lights=[0,1,2,3,4,5,6]；
$scope.currentLight=0；
功能灯（索引）{
如果（$scope.lights.length<索引）{
光（0）；
}否则{
$scope.currentLight=索引；
$timeout（函数（）{
光（++指数）；
}, 1000);
}
}
光（0）；
}

HTML

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul ng-repeat="light in lights">
        <li class="dot" ng-class="{'red': $index == currentLight}">     
        </li> 
    </ul>
</div>

灯光

什么触发下一个灯光？计时器？其他事件？可能会有延迟，当完成重新开始时，是什么触发下一个灯光？计时器？其他一些事件？可能会有延迟，当完成对开始超程的重新加载时，我们可以在页面加载时初始化它吗？没必要button@sani我做了另一个演示。谢谢，我们可以在页面加载时初始化它吗？没必要button@sani我做了另一个演示。：）当然-没问题。我只是想让你用它而不是用勺子喂它——为了你自己的利益：）当然——没问题。我只是想让你工作，而不是用勺子喂它——为了你自己的利益

function MyCtrl($scope, $timeout) {
    $scope.lights = [0,1,2,3,4,5,6];
    $scope.currentLight = 0;

    function light(index){
        if($scope.lights.length < index) {
            light(0);
        } else {
            $scope.currentLight = index;
            $timeout(function(){
                light(++index);
            }, 1000);
        }
    }

    light(0);
}

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul ng-repeat="light in lights">
        <li class="dot" ng-class="{'red': $index == currentLight}">     
        </li> 
    </ul>
</div>