如何使用 Javascript 來簡化此代碼？

Question

我開始學習 Javascript，並且正在建立一些網站來提高我的技能。 但是在這里我想和你分享一個我無法簡化的代碼。 正如您將意識到的，我正在獲取一些 DIVS 的 ID，然后添加一個轉到不同類別的事件。 但是，如果不使用所有這些代碼，我找不到讓它更容易的方法。

let entradas = document.getElementById("entradas");
entradas.addEventListener("click",irUrl1);
function irUrl1 () {
    window.location = "https://jikan.es/menu/entradas"
}


let veggie = document.getElementById("veggie");
veggie.addEventListener("click",irUrl2);
function irUrl2 () {
    window.location = "https://jikan.es/menu/veggie"
}


let rollsEspeciales = document.getElementById("rolls-especiales");
rollsEspeciales.addEventListener("click",irUrl3);
function irUrl3 () {
    window.location = "https://jikan.es/menu/especiales"
}


let pokeBowls = document.getElementById("poke-bowls");pokeBowls.addEventListener("click",irUrl4);
function irUrl4 () {
    window.location = "https://jikan.es/menu/poke-bowls"
}


let sashimi = document.getElementById("sashimi-niguiris");
sashimi.addEventListener("click",irUrl5);
function irUrl5 () {
    window.location = "https://jikan.es/menu/sashimi-niguiris"
}


let combinados = document.getElementById("combinados");
combinados.addEventListener("click",irUrl6);
function irUrl6 () {
    window.location = "https://jikan.es/menu/combinados"
}


let rollsClasic = document.getElementById("rolls-clasicos");
rollsClasic.addEventListener("click",irUrl7);
function irUrl7 () {
    window.location = "https://jikan.es/menu/rolls-clasicos"
}



let rollsSignature = document.getElementById("rolls-signature");
rollsSignature.addEventListener("click",irUrl8);
function irUrl8 () {
    window.location = "https://jikan.es/menu/rolls-signature"
}



let promociones = document.getElementById("promociones");
promociones.addEventListener("click",irUrl9);
function irUrl9 () {
    window.location = "https://jikan.es/menu/promociones"
}


    

</script>```

Answer 1

您可以在一行中完成所有操作：

 document.querySelectorAll("#entradas,#veggie,#rolls-especiales,#poke-bowls,#sashimi-niguiris,#combinados,#rolls-clasico,#rolls-signature,#promociones").forEach(el=>el.addEventListener("click",()=>window.location = "https://jikan.es/menu/"+el.id.replace("rolls-especiales","especiales")));

我用replace()函數處理的規則似乎有一個例外：id #rolls-especiales需要重定向到especiales （沒有“rolls-”）。

但是，最好的解決方案仍然是在 html 標記中簡單地使用某種類型的<a href="...">標記。

Answer 2

您可以從以下位置簡化代碼：

let entradas = document.getElementById("entradas");
entradas.addEventListener("click",irUrl1);
function irUrl1 () {
    window.location = "https://jikan.es/menu/entradas"
}

至：

document.getElementById("entradas").addEventListener("click", function() {
    window.location = "https://jikan.es/menu/entradas";
});

或者你可以使用 jQuery：

$('#entradas').click(function() {
    window.location = "https://jikan.es/menu/entradas";
});

Answer 3

['entradas', 'veggie'].forEach(id => {
  document.getElementById(id).addEventListener('click', () => {
    window.location = `https://jikan.es/menu/${id}`
  })
})

這應該會減少您的重復，但我仍然認為正確的編碼方式是使用樣式類似於您的 div 的錨標記，例如

<a style="whatever styles your div has" href="..." />