（业余问题）需要创建一个函数来减少重复代码

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

}

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

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

Answer 1

不要使用类似元素的通用属性。通过这种方式，您可以轻松地将它们选为集合，并在循环中应用所需的任何操作。idclassforEach//get all elementsconst items = document.querySelectorAll('.clickable');//apply event listener to all elementsitems.forEach(item => item.addEventListener('click', func));function func(event) {&nbsp; //reset all elements&nbsp; items.forEach(item => {&nbsp; &nbsp; item.style.color = "black";&nbsp; });&nbsp; //apply change to clicked element&nbsp; event.target.style.color = "blue";}<div class="clickable">one</div><div class="clickable">two</div><div class="clickable">three</div>

Answer 2

您的方法有两个主要问题。通过为每个元素使用单独的ID，您必须逐个手动选择它们，这很快就会变得非常详细。单独隐藏它们中的每一行都需要n *n行代码，随着元素数量的增加，这些代码会变得非常快。每次执行 时，您都会要求 Javascript 在 DOM 孔中到处搜索指定的元素。这是非常占用 CPU 资源。您应该执行一次并重用它，方法是将其存储在常量中：然后重用 。document.getElementByIdconst $elem1 = document.getElementById("elem1")$elem1更好的是，与其为每个元素指定一个单独的名称，不如为它们提供相同的类名并使用它。const $elems = Array.from(document.getElementsByClassName("elem"));console.log("elems = ", $elems)const clickHandler = event => {&nbsp; $elems.forEach($e => $e.style.display = "none");&nbsp; event.target.style.display = "block";};$elems.forEach($elem =>&nbsp; $elem.addEventListener("click", clickHandler));.elem{&nbsp; &nbsp; cursor: pointer;}<div class="elem">Elem 1</div><div class="elem">Elem 2</div><div class="elem">Elem 3</div><div class="elem">Elem 4</div><div class="elem">Elem 5</div>如果包含jQuery是一个选项，它会变得更加简单：const $allElems = $(".elem");$allElems.click(function() {&nbsp; $allElems.hide();&nbsp; $(this).show();}).elem {&nbsp; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="elem">Elem 1</div><div class="elem">Elem 2</div><div class="elem">Elem 3</div><div class="elem">Elem 4</div><div class="elem">Elem 5</div>