Javascript如何在此动画上使用while循环？

我已经用javascript工作了几天了，但是我现在在循环/使用这个动画时被卡住了

基本上，程序将“升级”到一个新的彩色图像移动3次后，从一开始。到目前为止，我有一个黄金级别，但我想继续为下一个级别更改颜色。我试图在动画图像中添加一个新的类列表，每个计数器都有一个不同的类列表，但似乎没有任何效果。我就是这样做的：

$("#go").click(function() {
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
  
  if (dest < 400) {
    $("#block").animate({
      marginLeft: dest + "px"
    }, 700);
  } else {
      
    $("#block").animate({
      marginLeft:  "10px"
    }, 100);
    //if counter = 1
    document.getElementById('block').classList.add("gold")
    //if counter = 2
    //document.getElementById('block').classList.remove("gold")
    //document.getElementById('block').classList.add("pink")
       //... etc
    
    //counter += 1 
  }
});

$（“#go”）。单击（函数（）{
var dest=parseInt（$（“#block”）.css（“左边距”）.replace（“px”，“块”）+100；
如果（目的地<400）{
$（“#块”）。设置动画({
marginLeft:dest+“px”
}, 700);
}否则{
$（“#块”）。设置动画({
边缘左侧：“10px”
}, 100);
//如果计数器=1
document.getElementById（'block'）.classList.add（“黄金”）
//如果计数器=2
//document.getElementById（'block'）.classList.remove（“黄金”）
//document.getElementById（'block'）.classList.add（“粉色”）
//…等等
//计数器+=1
}
});

这是运行程序的链接（单击运行文本）

---

希望有人能帮忙

您需要将

计数器

变量初始化为click事件侦听器外部的0，否则每次单击时它都会重置为0

var计数器=0//⭐️ 在这里申报柜台
$（“#go”）。单击（函数（）{
var dest=parseInt（$（“#block”）.css（“左边距”）.replace（“px”，“块”）+100；
如果（目的地<400）{
$（“#块”）.animate（{marginLeft:dest+“px”}，700）；
}否则{
$（“#块”）.animate（{marginLeft:“10px”}，100）；
计数器++；
如果（计数器==1）{
document.getElementById（'block'）.classList.add（“黄金”）
}
如果（计数器==2）{
document.getElementById（'block'）.classList.remove（“黄金”）
document.getElementById（'block'）.classList.add（“粉色”）
}
//等等。
}
});

$（文档）.ready（函数（）{
函数BoxAnimate（）{
var计数=0；
而（计数<6）{
$（“.boxanimate”）.eq（count）.停止（true，true）.延迟（1000*count）.设置动画({
左：“400px”
});
计数++；
}
}
BoxAnimate（）；
});
.boxanimate{背景：绿色；
边缘底部：10px；
左边距：30px；
高度：150像素；
宽度：150px；
字体系列：Arial；
字体大小：30px；
文本对齐：居中；
颜色：#fff；
线高：150px；
位置：相对位置；
明确：两者皆有；
}

数据1
数据2
数据3
数据4
数据5