Javascript 用于选择下一个数组元素的循环

我试图创建一个循环，在单击之后选择下一个数组元素，问题是它一次迭代所有数组元素，并给出所有数组元素。这是我的密码：

head_button.addEventListener('click', function (e) {
    e.stopPropagation();
    change_head();
    dwarf.appendChild(head);
}, false);

function change_head() {
    var head_class = [
        {name: "bold"},
        {name: "rainbow_head"},
        {name: "hut_head"},
        {name: "beats_head"}
    ];
    for (let i = 0; i < head_class.length; i++){
        head.classList.add(head_class[i].name);
        break;
    }
};

head_按钮。addEventListener（'click'，函数（e）{
e、 停止传播（）；
改变头（）；
侏儒。附属物（头）；
}，假）；
功能更改\u头（）{
var head_类=[
{名称：“粗体”}，
{名称：“彩虹头”}，
{name:“hut_head”}，
{name:“beats_head”}
];
for（设i=0；i

---

希望有可能

在事件处理程序之外声明

head\u class

和

i

，不要使用循环，因为每次用户单击时您只想前进一步：

head_button.addEventListener('click', function (e) {
    e.stopPropagation();
    change_head();
    dwarf.appendChild(head);
}, false);

var head_class = [
    {name: "bold"},
    {name: "rainbow_head"},
    {name: "hut_head"},
    {name: "beats_head"}
];
var i = 0;
function change_head() {
    if (i < head_class.length) {
        head.classList.add(head_class[i].name);
        ++i;
    }
}

这是head

创建将保存数字的变量，并基于该变量从数组中选择下一个元素

编辑 我以为您想删除旧类，所以这里有更新的代码

let current = 0;
var head_class = [
    {name: "bold"},
    {name: "rainbow_head"},
    {name: "hut_head"},
    {name: "beats_head"}
];
function change_head() {
    head.classList.remove(head_class[current].name); // remove current
    if(++current > head_class.length) current = 0;
    head.classList.add(head_class[current].name); // add new
};

您可以尝试以下方法：-

head_button.addEventListener('click', function (e) {
    e.stopPropagation();
    change_head(e);
    dwarf.appendChild(head);
}, false);

function change_head() {
    var head_class = [
        {name: "bold"},
        {name: "rainbow_head"},
        {name: "hut_head"},
        {name: "beats_head"}
    ];
    let nextElement = false;
    for (let i = 0; i < head_class.length; i++){
        if(e.target.value === head_class[i]) nextElememnt = true;
        if(nextElement){
        head.classList.add(head_class[i].name);
        break;
}

    }
};

head_按钮。addEventListener（'click'，函数（e）{
e、 停止传播（）；
改变头部（e）；
侏儒。附属物（头）；
}，假）；
功能更改\u头（）{
var head_类=[
{名称：“粗体”}，
{名称：“彩虹头”}，
{name:“hut_head”}，
{name:“beats_head”}
];
设nextElement=false；
for（设i=0；i

请注意，您的方式将在最后一个元素停止，而不执行任何操作。当

i=head\u class.length

@Oen44-Done.：-）返回时会很酷