javascript - 如何重新启动顺序模式，从单击的元素开始

Question

我有 4 个橙色按钮，我正在创建一个调用另一个函数的 setInterval 函数，以使 4 个按钮每三秒改变一次颜色，这个东西运行良好。

现在假设当前的灰色按钮是按钮 1，从逻辑上讲，下一个要更改的按钮是按钮 2，如果我单击按钮 3，我希望按钮 4 而不是按钮 2 发生变化，所以我想更改下一个按钮。

这是我的 jsfiddle example

这是我的代码:

var z = 1;
	function updateColor(btn) {
   		
    	// defilement des boutons de jaune a gris sur desktop
    	$('.all-divs').find('.btn').removeClass('btn-current');
    	z++;
   		$('#btn-'+z).addClass('btn-current').siblings('.btn-current').removeClass('btn-current');
   		if(z == 4){z = 0;}
  }

  $(document).ready(function() {
        setInterval(updateColor, 3000);
    });

    $('.btn').click(function(){
        $('.btn').removeClass("btn-current");
        $(this).addClass("btn-current");
    });

.btn{
  width:50px;
  height:50px;
  margin:10px auto;
  text-align:center;
  background-color:orange;
  border-radius:50px;
}

.btn-current{
  width:50px;
  height:50px;
  margin:10px auto;
  text-align:center;
  background-color:#666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="all-divs">


  <div class="btn" id="btn-1">
    1
  </div>
  <div class="btn" id="btn-2">
    2
  </div>
  <div class="btn" id="btn-3">
    3
  </div>
  <div class="btn" id="btn-4">
    4
  </div>

</div>

谢谢大家

Answer 1

在您的按钮点击事件中，只需进行以下更改:

$('.btn').click(function(){
    $('.btn').removeClass("btn-current");
    $(this).addClass("btn-current");
    z = this.id.split('-')[1];
});

jsFiddle Demo