如何让这段js重复代码变成循环？

Question

我有这段代码，重复 20 次，仅更改变量前缀。 我怎么可能做一个循环并迭代它以避免这个巨大的代码块？ 它在我的网站中使用，我想让开发过程更加清晰。

var keepElements = document.getElementsByName("keep-type");
for(var i = 0; i < keepElements.length; i++){
    keep = document.getElementById(keepElements[i].value);
    if(keepElements[i].checked == true){
        keep.style.display = "block";
    }
    else{keep.style.display = "none";}
}

var offworkshopElements = document.getElementsByName("offworkshop-type");
for(var i = 0; i < offworkshopElements.length; i++){
    offworkshop = document.getElementById(offworkshopElements[i].value);
    if(offworkshopElements[i].checked == true){
        offworkshop.style.display = "block";
    }
    else{offworkshop.style.display = "none";}
}

var defworkshopElements = document.getElementsByName("defworkshop-type");
for(var i = 0; i < defworkshopElements.length; i++){
    defworkshop = document.getElementById(defworkshopElements[i].value);
    if(defworkshopElements[i].checked == true){
        defworkshop.style.display = "block";
    }
    else{defworkshop.style.display = "none";}
}

Answer 1

将逻辑移动到 function：

function keepElements(name) {
    var keepElements = document.getElementsByName(name);
    for (var i = 0; i < keepElements.length; i++) {
        keep = document.getElementById(keepElements[i].value);
        if (keepElements[i].checked == true) {
            keep.style.display = "block";
        }
        else { keep.style.display = "none"; }
    }
}

keepElements("keep-type");
keepElements("offworkshop-type");
keepElements("defworkshop-type");

Answer 2

如果我没有遗漏任何细节，那么您将重复同一块 3 次：

["keep-type", "offworkshop-type", "defworkshop-type"].forEach(name => {
    var elements = document.getElementsByName(name);
    for(var i = 0; i < elements.length; i++){
        element = document.getElementById(elements[i].value);
        if(elements[i].checked == true){
            element.style.display = "block";
        }
        else{element.style.display = "none";}
    }
});

我更喜欢 array / forEach 语法，因为该块以名称列表开头。 但是您可以改用 for...of 循环。

for (const name of ["keep-type", "offworkshop-type", "defworkshop-type"]) {
    var elements = document.getElementsByName(name);
    for(var i = 0; i < elements.length; i++){
        element = document.getElementById(elements[i].value);
        if(elements[i].checked == true){
            element.style.display = "block";
        }
        else{element.style.display = "none";}
    }
}

Answer 3

说您应该将通用功能放入单个 function 中的答案是绝对正确的。

我只想补充一点，在查询方面也有解决方案：

您可以将所有元素收集在一个 javascript function, querySelectorAll()

const elements = document.querySelectorAll('[name="keep-type"], [name="offworkshop-type"], [name="defworkshop-type"]')

或者，您可以通过 class 给他们所有相同的 class 和 select。

const elements = document.getElementsByClassName("requiredElements");

这样你就可以将所有元素放在一个数组中。