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

Question

大家晚上好！我写了一个脚本，可以通过单击选项卡在“”页面之间切换（例如，请参阅图像）问题：我写的代码非常重复和新手我尝试过编写 switch 和 if/else 循环来减少冗余，但我不够好。有人可以帮助我吗？非常感谢你提前！//Getting HTML elements and adding eventListener to trigger function on-clickdocument.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 objectsfunction 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 - 依此类推。每个按钮都连接到具有匹配背景颜色的 divhttps://i.stack.imgur.com/5BRi9.jpg

Answer 1

不要使用类似元素的通用属性。通过这种方式，您可以轻松地将它们选为集合，并在循环中应用所需的任何操作。idclassforEach

//get all elements

const items = document.querySelectorAll('.clickable');

//apply event listener to all elements

items.forEach(item => item.addEventListener('click', func));

function func(event) {

  //reset all elements

  items.forEach(item => {

    item.style.color = "black";

  });

  //apply change to clicked element

  event.target.style.color = "blue";

}

<div class="clickable">one</div>

<div class="clickable">two</div>

<div class="clickable">three</div>

Answer 2

您的方法有两个主要问题。

1. 通过为每个元素使用单独的ID，您必须逐个手动选择它们，这很快就会变得非常详细。单独隐藏它们中的每一行都需要n *n行代码，随着元素数量的增加，这些代码会变得非常快。

2. 每次执行 时，您都会要求 Javascript 在 DOM 孔中到处搜索指定的元素。这是非常占用 CPU 资源。您应该执行一次并重用它，方法是将其存储在常量中：然后重用 。document.getElementByIdconst $elem1 = document.getElementById("elem1")$elem1

更好的是，与其为每个元素指定一个单独的名称，不如为它们提供相同的类名并使用它。

const $elems = Array.from(document.getElementsByClassName("elem"));

console.log("elems = ", $elems)

const clickHandler = event => {

  $elems.forEach($e => $e.style.display = "none");

  event.target.style.display = "block";

};

$elems.forEach($elem =>  $elem.addEventListener("click", clickHandler));

.elem{

    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() {

  $allElems.hide();

  $(this).show();

})

.elem {

  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>