如何创建一个将由事件侦听器调用的单个函数，而不是每个不同按钮的函数？

Posted 2023-03-25

【中文标题】如何创建一个将由事件侦听器调用的单个函数，而不是每个不同按钮的函数？

【英文标题】：How can I create ONE single function that will be called by an event listener instead of function for each different button?

【发布时间】：2021-10-17 04:58:42

【问题描述】：

 function buttonOne() 
  document.body.style.backgroundImage =
    'url(imgs/advbackground1.jpg)';


function buttonTwo() 
  document.body.style.backgroundImage =
    'url(imgs/advbackground2.jpg)';



 
function buttonThree() 
  document.body.style.backgroundImage =
    'url(imgs/advbackground3.jpg)';


function buttonFour() 
  document.body.style.backgroundImage =
    'url(imgs/advbackground4.jpg)';
  

//每个按钮将背景更改为新的。我努力寻找一种有效的方法来创建一个函数，以便在单击每个按钮时能够传递给事件侦听器

【问题讨论】：

请添加一个标签来显示这是哪种语言。

抱歉哈哈谢谢指出

【参考方案1】：

编写一个有参数（或自变量）的函数。

function anybutton(whichButton)

 document.body.style.backgroundImage = 
          'url(imgs/advbackground' + whichButton + '.jpg)';

然后在按钮 #1 上：“onclick=anybutton(1);”其他人也是如此 如果所需的操作更复杂，您可以在 whichButton 上使用“if”语句，或编写所需的任何代码。

【参考方案2】：

遍历 querySelectorAll 数组中的按钮，然后您可以使用基于 event.id 的 switch 语句来更改背景图像或您正在执行的任何操作.. 或者您可以使用 map.set 将图像设置为值与您的按钮的 id 匹配的键，并 map.get 与您的 id 匹配的值。

const rangeOfButtons = document.querySelectorAll(".button-class")
let targetButton = "" //to give you higher scope.
for(i=0;i<rangeOfButtons.length;i++)
  rangeOfButtons[i].addEventListener("click",function(e)
    targetButton = e.target.id
   )