用于具有类似id模式的按钮的单个onclick函数-JavaScript_Javascript_Onclick_Addeventlistener

用于具有类似id模式的按钮的单个onclick函数-JavaScript

javascript

用于具有类似id模式的按钮的单个onclick函数-JavaScript,javascript,onclick,addeventlistener,Javascript,Onclick,Addeventlistener,我想减少代码 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元素的单一函数。我怎样才能做

我想减少代码

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

您可以使用和选择器

[id^=dealsButton\

在单行中添加事件侦听器-请参阅下面的演示：

函数一（）{
控制台日志（“hai”）；
}
Array.prototype.forEach.call(
document.querySelectorAll（'[id^=dealsButton_307;]'，函数（e）{
e、 addEventListener（“单击”，一个）；
});
1
两个
您正在寻找这样的产品：
function onClick(){
  //single handler
}

$('[id*="dealsbutton_"]').click(onClick)

这里有一个解决方案，您可以根据需要选择ID名称，而无需特定的名称模式
<html>
  <body>
    <div id="abc">one</div>
    <div id="def">two</div>

    <script type="text/javascript">
      function one() {
       console.log("hai");
      }

      function addOnclickFunc (func, idArray){
        idArray.forEach(function(element) {
          document.getElementById(element).onclick = func;
        })
      }

      addOnclickFunc(one,["abc","def"])
    </script>
  </body>
</html>


一
二
功能一（）{
控制台日志（“hai”）；
}
函数addOnclickFunc（func，idArray）{
idArray.forEach（函数（元素）{
document.getElementById（element）.onclick=func；
})
}
addOnclickFunc（一个，[“abc”，“def”]）
您将jQuery与regex一起用于此
$.each( $("button[id^='dealsButton_']"), function () {
 $(this).on('click', function(){
  //code here
 })
});

如果想要动态地调用函数名。将其作为数据属性传递给button元素，并使用eval函数调用它
<button id="dealButton_1" data-click="one"></button>

$.each( $("button[id^='dealsButton_']"), function () {
 $(this).on('click', function(){
   var function_call = $(this).attr('data-click')
   eval(function_call)
 })
});


$。每个（$（“按钮[id^='dealsButton\']），函数（）{
$（此）。在（'单击'，函数（）上）{
var function_call=$（this）.attr（'data-click'）
评估（功能调用）
})
});
如果一个
和两个
做相同的事情，为什么要使用函数？好的，对不起。等待我的编辑。对静态父元素使用事件委派，检查目标元素的id属性，然后调用适当的函数（如果有）match@PatrickEvans你可以发布答案，这将是最理想的解决方案。当前的两个答案都没有提到“元素是动态加载的”。即使它是粗体的。@dfsq，实际上我确信在某个地方有重复的，所以在我找到它之前，请留下该注释。到目前为止，我找到的最接近的答案是jQuery，但所有答案都是jQuery，没有提到动态部分。甚至我认为你的答案仍然忽略了最重要的细微差别：“元素是动态加载的。”如果没有Regexp:if（e.target&&e.target.matches（'[id^=dealsButton_quo;]'）{…