编辑

Question

我试图做一个单击后选择下一个数组元素的循环，问题是它一次迭代所有对象并为我提供所有数组元素。这是我的代码：

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;
    }
};

希望有可能

Answer 1

创建一个将保留数字的变量，然后根据该变量从数组中选择下一个元素。

编辑

我认为您想删除旧的类，所以这里是更新的代码。

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
};

Answer 2

在事件处理程序的外部声明head_class和i，并且不使用循环，因为每次用户单击时，您只希望前进一个： / p>

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;
    }
}

理想情况下，不要把所有这些都放在全局范围内，因为全局范围已经很拥挤了。

例如：

// Scoping function 
(function() {
    var head_button = document.getElementById("head_button");
    
    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;
        }
    }
})();

.bold {
  font-weight: bold;
}
.rainbow_head {
  background-color: yellow;
}
.hut_head {
  color: green;
}
.beats_head {
  font-style: italic;
}

<input type="button" id="head_button" value="Click Me">
<div id="head">This is head</div>

这只会遍历元素一次。如果要循环播放，可以更改：

++i;

到

i = (i + 1) % head_class.length;

旁注：您似乎正在尝试在同一父元素（head）上多次调用appendChild时重用dwarf。请注意，执行此操作时，不会复制该元素。它仅附加一次，然后您就可以修改该元素。

Answer 3

您可以尝试以下操作：-

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;
}

    }
};

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

3 个答案:

编辑