具有类似 id 模式的按钮的单个 onclick 函数

single onclick function for buttons with a similar id pattern - JavaScript(具有类似 id 模式的按钮的单个 onclick 函数 - JavaScript)

本文介绍了具有类似 id 模式的按钮的单个 onclick 函数 - JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想减少代码.

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 元素的单个函数.我怎样才能做到这一点.元素是动态加载的.

A single function for on click on 'dealsButton_*' patterned id elements. How can I do this. The elements are dynamically loaded.

推荐答案

你可以使用 querySelectorAll 和 selector [id^=dealsButton_] 添加事件监听器在一行 - 见下面的演示:

You can use querySelectorAll and the selector [id^=dealsButton_] to add the event listener in a single line - see demo below:

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>

如果标记是动态加载的，您可以将其base放在 static 元素上，如下所示:

If the markup is dynamically loaded you can base it on a static element like this:

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>`;

这篇关于具有类似 id 模式的按钮的单个 onclick 函数 - JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！