如何轉換此代碼以便函數可以采用變量？

Question

當鼠標經過它們時，我正在嘗試更改導航欄元素的顏色。

這段代碼可以做到這一點，但僅適用於第一個按鈕：

let navOne = document.getElementById("nav1");

function mouseOn() {
    nav1.style.color = "red";
}

function mouseOff() {
    nav1.style.color = "black";
}

navOne.addEventListener('mouseover', mouseOn);
navOne.addEventListener('mouseout', mouseOff);

我一直在嘗試轉換代碼，以便這些功能適用於多個按鈕，但似乎無法使其正常工作。 這是到目前為止的代碼：

let navOne = document.getElementById("nav1");

function mouseOn(navButton) {
    navButton.style.color = "red";
}

function mouseOff(navButton) {
    navButton.style.color = "black";
}

navOne.addEventListener('mouseover', mouseOn(navOne));
navOne.addEventListener('mouseout', mouseOff(navOne));

它沒有錯誤，但當我將鼠標按鈕移到 nav1 元素上時不會導致任何顏色變化。

任何幫助是極大的贊賞。

Answer 1

您可以讓事件處理函數利用傳入的event參數：

 function mouseOn(e) { e.target.style.color = "red"; } function mouseOff(e) { e.target.style.color = "black"; } for (let navItem of document.querySelectorAll('nav a')) { navItem.addEventListener('mouseover', mouseOn); navItem.addEventListener('mouseout', mouseOff); }

 nav a { display: inline-block; padding: 10px; color: black; }

 <nav> <a href="#" id="nav1">Nav One</a> <a href="#" id="nav2">Nav Two</a> </nav>

但是，現在使用 css :hover偽屬性將是首選方法。 無需 JS 代碼。

 nav a { display: inline-block; padding: 10px; color: black; } nav a:hover { color: red; }

 <nav> <a href="#">Nav One</a> <a href="#">Nav Two</a> </nav>