javascript - 具有相似 id 模式的按钮的单个 onclick 函数 - JavaScript

Question

我想减少代码。

function one() {
 console.log("hai");
}

document.getElementById('dealsButton_1').onclick = one;
document.getElementById('dealsButton_2').onclick = one;
//I  want the above 2 lines of code reduced to one.

单击“dealsButton_*”图案化 id 元素的单个函数。我怎样才能做到这一点。 元素是动态加载的。

Answer 1

您可以使用 querySelectorAll和 选择器 [id^=dealsButton_] 在一行中添加事件监听器 - 请参见下面的演示:

function one() {
 console.log("hai");
}

Array.prototype.forEach.call(
  document.querySelectorAll('[id^=dealsButton_]'), function(e) {
  e.addEventListener('click', one);
});

<div id="dealsButton_1">one</div>
<div id="dealsButton_2">two</div>

如果标记是动态加载，您可以基于它在静态元素上，如下所示:

function one() {
  console.log("hai");
}

document.addEventListener('click', function(e) {
  if (e.target && /^dealsButton_/.test(e.target.id))
    one();
})

// dynamically add
document.body.innerHTML = `<div id="dealsButton_1">one</div>
<div id="dealsButton_2">two</div>`;