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.

单击此功能可以点击＆＃39; dealsButton _ *＆＃39;图案的id元素。我怎样才能做到这一点。 元素是动态加载的。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你在寻找这样的东西：

function onClick(){
  //single handler
}

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

Answer 3

这是一个解决方案，您可以根据需要选择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>

Answer 4

你将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)
 })
});

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

4 个答案: