对于数组中的每个元素，我希望它都有另一个元素，每个元素都有唯一的操作

Question

我想让myArray中的每个元素都有其唯一的操作，但最终只有一个元素可以工作
我尝试了另一种行之有效的方法，但这完全是一个样板，我正在寻找比这更好的解决方案
更多详细信息：对于myArray中的每个元素(另一个按钮数组(，它将具有独特的操作，如HTML中某个元素的scrollIntoView。
在HTML中，我有4个div共享同一个类，看起来是这样的：

<div class='firstDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>
<div class='secondDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>

let aboutSection = document.querySelector('.about')
let serviceSection = document.querySelector('.services')
let teamSection = document.querySelector('.team')
let homeBtn = document.querySelectorAll('.homeBtn');
let aboutBtn = document.querySelectorAll('.aboutBtn');
let serviceBtn = document.querySelectorAll('.serviceBtn')
let teamBtn = document.querySelectorAll('.teamBtn')
let myArray = [];
myArray[0] = homeBtn;
myArray[1] = aboutBtn;
myArray[2] = serviceBtn;
myArray[3] = teamBtn;

myArray.forEach(el => {
addEventListener('click', () => {
teamBtn.forEach(() => {
teamSection.scrollIntoView();
});
serviceBtn.forEach(() => {
serviceSection.scrollIntoView();
});
})
})

Answer 1

您确实希望从包装所有div的容器中进行委派。那么所有按钮只需要一个事件处理程序

document.getElementById("nav").addEventListener("click",function(e) {
const tgt = e.target.closest("button")
if (tgt && (tgt.classList.contains("teamBtn") ||tgt.classList.contains("serviceBtn"))) {
document.getElementById(tgt.dataset.id).scrollIntoView();
} 
})

section div {
height: 500px;
background-color: red;
border: 1px solid black;
}

<nav id="nav">
<div class="firstDiv">
<button class="teamBtn" data-id="team1">Team 1</button>
<button class="serviceBtn" data-id="service1">Service 1</button>
</div>
<div class="secondDiv">
<button class="teamBtn" data-id="team2">team 2</button>
<button class="serviceBtn" data-id="service2">Service 2</button>
</div>
</nav>
<section id="content1">
<div id="team1">Team 1</div>
<div id="service1">Service 1</div>
</section>
<section id="content2">
<div id="team2">Team 2</div>
<div id="service2">Service 2</div>
</section>