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

我有4个橙色按钮，我正在创建一个setInterval函数，它调用另一个函数，以便使4个按钮每三秒钟改变一次颜色，这东西工作得很好

现在假设当前的灰色按钮是按钮1，逻辑上下一个要更改的按钮是按钮2，如果我单击按钮3，我希望按钮4更改，而不是按钮2，因此我希望更改下一个按钮

这是我的

这是我的密码：

var z=1；
函数更新颜色（btn）{
//桌面上的灰尘污染
$（'.all divs'）.find（'.btn'）.removeClass（'btn-current'）；
z++；
$（'#btn-'+z）.addClass（'btn-current'）。同胞（'.btn-current'）。removeClass（'btn-current'）；
如果（z==4）{z=0；}
}
$（文档）.ready（函数（）{
设置间隔（更新颜色，3000）；
});
$（'.btn'）。单击（函数（）{
$（'.btn'）.removeClass（“btn当前”）；
$（此）.addClass（“btn当前”）；
});
.btn{
宽度：50px；
高度：50px；
利润率：10px自动；
文本对齐：居中；
背景颜色：橙色；
边界半径：50px；
}
.btn电流{
宽度：50px；
高度：50px；
利润率：10px自动；
文本对齐：居中；
背景色：#666；
}

1.
2.
3.
4.
试试这个。如果我理解正确，应该会有帮助

1
2.
3.
4.
函数updateColor（id）{
$（'.btn'）.removeClass（'btn-current'）；
var btnId='#btn-'+id；
$（btnId）.addClass（'btn-current'）；
}
$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（e）{
var id=this.getAttribute（'id'）.substr（4）；
如果（id==4）
{id=1；}
else{id=parseInt（id）+1；}
更新颜色（id）；
});
});
在按钮单击事件中，只需进行以下更改：

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

你陈述了你想要实现的目标，但没有提到你的问题在哪里或你的问题是什么。我的问题是：如何更改我单击的按钮旁边的按钮的颜色，并使更改遵循新的顺序，而不是“自动顺序”？hi@arturas也许我没有让它容易理解（因为我的英语不好），但是谢谢你的帮助。我想要的是保持自动更改，如果我单击一个按钮，下一个按钮将更改，我们将丢失自动更改
$('.btn').click(function(){
    $('.btn').removeClass("btn-current");
    $(this).addClass("btn-current");
    z = this.id.split('-')[1];
});