如何讓這段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");

這樣你就可以將所有元素放在一個數組中。