Javascript - 通用函数的多种使用

Question

我这里有一个情况示例，我想在单击时更改 div 的颜色。我是否必须有两个不同的函数，每个 div 一个？如果我想要应用于 div 的函数非常复杂怎么办？如果我有数百个 div 怎么办？我可以创建一个可以应用于每个 div 的通用函数吗？我的意思并不是例如 document.getElementsByClassName("... ")，我想例如单独更改颜色。

需要明确的是，如何将相同函数应用于不同的对象？像 document.getElementThatIsClicked("... ") 谢谢。

function changeColor1() {
  document.getElementById("div1").style.backgroundColor = "#21a9c9";
}
function changeColor2() {
  document.getElementById("div2").style.backgroundColor = "#21a9c9";  
}

<div id="div1" onClick="changeColor1()" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>
                      
<div id="div2" onClick="changeColor2()" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>

Answer 1

您可以创建一个函数来接受要更改颜色的元素，并使该函数更改该元素的背景颜色

 function changeColor(elem) {
   elem.style.backgroundColor = "#21a9c9"
 }

<div id="div1" onClick="changeColor(this)" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>

<div id="div2" onClick="changeColor(this)" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>