Question

如何将此事件侦听器重写为一个我不会重复自己的函数或循环。谢谢

const button1 = document.querySelector("#no-1");const content1 = document.querySelector("#open-1");

const button2 = document.querySelector("#no-2");const content2 = document.querySelector("#open-2");

const button3 = document.querySelector("#no-3");const content3 = document.querySelector("#open-3");

const button4 = document.querySelector("#no-4");const content4 = document.querySelector("#open-4");

button1.onclick = function() {content1.style.display ="block";}

button2.onclick = function() {content2.style.display ="block";}

button3.onclick = function() {content3.style.display ="block";}

button4.onclick = function() {content4.style.display ="block";}

Answer 1

为什么不只是这样？


    for (let i=1; i<=4; i++) {
      const button = document.querySelector(`#no-${i}`);
      const content = document.querySelector(`#open-${i}`);
      button.onclick = function() {
        content.style.display ="block";
      }
    }

甚至

for (let i=1; i<=4; i++) {
  document.querySelector(`#no-${i}`).onclick = function() {
    document.querySelector(`#open-${i}`).style.display ="block";
  }
}

Answer 2

将来，包含HTML很有用，并以摘要的形式提供示例供我们使用。

我刚刚制作了一个片段，其中“内容” div包装了按钮。亚瑟的答案很好，并且会很好地工作。另一种选择（我在这里显示）是获取按钮的id名称（您可以通过将事件传递给函数，然后使用e.target来访问元素来访问它），提取连字符后的数字，然后再获取内容div。

我在这里偷了随机颜色生成器：

Random color generator

更改div背景，以便您可以看到单击按钮会影响右侧的div。

function onButtonClick(e) {
  const targetNum = e.target.id.split("-")[1];
  document.querySelector('#open-'+targetNum).style.backgroundColor = getRandomColor();
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<div id="open-1" style="padding: 5px; border: 1px solid #ccc">
<button id="no-1" onclick="onButtonClick(event)">button 1</button>
</div>

<div id="open-2" style="padding: 5px; border: 1px solid #ccc">
<button id="no-2" onclick="onButtonClick(event)">button 2</button>
</div>

<div id="open-3" style="padding: 5px; border: 1px solid #ccc">
<button id="no-3" onclick="onButtonClick(event)">button 3</button>
</div>

<div id="open-4" style="padding: 5px; border: 1px solid #ccc">
<button id="no-4" onclick="onButtonClick(event)">button 4</button>
</div>

如何将多个事件侦听器和查询选择器组合到一个函数中？

2 个答案: