(Проблема на любителя) Необходимо создать функцию для уменьшения повторяющегося кода

Question

Добрый вечер, ребята!

Я написал сценарий, который позволяет переключаться между "" страницами, нажимая на вкладки (см. Изображение, например)

Проблема: Код, который я написанное очень повторяющееся и noob-i sh

Я пробовал писать циклы 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 представляет 'jobb' с соответствующим цветным div - и так далее .. Каждая кнопка связана с div с соответствующий цвет фона

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

Answer 1

Вместо работы с id используйте общий атрибут class для похожих элементов. Таким образом, вы можете легко выбрать их как коллекцию и применить любое действие, необходимое в forEach l oop.

//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. Используя индивидуальные идентификаторы для каждого элемента, вы должны выбирать их вручную один за другим, что очень быстро становится очень подробным. Чтобы скрыть каждый из них по отдельности, требуется n * n строк кода, которые станут чудовищно большими очень быстро по мере увеличения количества элементов.

2. Каждый раз, когда вы выполняете document.getElementById, вы спросите от Javascript до go по всей дыре DOM и найдите указанный элемент. Это очень интенсивно использует процессор. Вы должны сделать это один раз и повторно использовать, сохранив его в константе: const $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>