（业余爱好者的问题，需要创建一个减少重复代码的函数

Question

晚上好，伙计们！

我编写了一个脚本，通过单击选项卡可以在“”页面之间切换（例如，参见图片）

问题：我编写的代码是非常重复的并且是菜鸟般的

我已经尝试编写switch和if / else循环以减少冗余，但是我还不足以做到这一点。

有人可以帮我吗？

非常感谢！

//Getting HTML elements and adding eventListener to trigger function on-click
document.getElementById("archiveBtnOne").addEventListener("click", showFirstTask);
document.getElementById("archiveBtnTwo").addEventListener("click", showSecondTask);
document.getElementById("archiveBtnThree").addEventListener("click", showThirdTask);
document.getElementById("archiveBtnFour").addEventListener("click", showFourthTask);

let firstContent = document.getElementById("aOverviewOne");
let secondContent = document.getElementById("aOverviewTwo");
let thirdContent = document.getElementById("aOverviewThree");
let fourthContent = document.getElementById("aOverviewFour");

//Functions to show current object, and hide other stacked objects
function showFirstTask(){
    document.getElementById("aOverviewOne").style.display = "block";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "none";
}

 function showSecondTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "block";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "none";
}

function showThirdTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "block";
    document.getElementById("aOverviewFour").style.display = "none";
}

function showFourthTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "block";
}

archiveBtnOne用匹配的彩色div表示'jobb'-依此类推。每个按钮都连接到具有匹配背景色的div

https://i.stack.imgur.com/5BRi9.jpg

Answer 1

如果包含jQuery是一个选项，则可以执行：

const $allElems = $(".elem");

$allElems.click(() => { 
    $allElems.hide();
    $(this).show();
 })

如果没有，那么它将变得更加冗长，您必须使用selectElementsByClassName("elem")选择所有元素，然后使用.forEach对其进行迭代，并在每个元素上附加一个点击处理程序，等等。