我们可以设置属性'id'到不同的'按钮'通过使用javascript或jquery的循环

Can we set attribute 'id' to different 'buttons' via loop using javascript or jquery?

本文关键字：循环 javascript jquery 按钮 设置 属性 id 我们      更新时间：2023-09-26

我想实现以下目标：

假设我的页面上有十个按钮，它们都是动态生成的。我已经将ID添加到这十个按钮中，比如ID为1,2,3….10。使用以下代码。

function createButton(id){
       button.setAttribute("name", id);
}

现在我想把"onlick"事件添加到所有这些按钮中，比如这个

function abc()
      $(document).on('click','#1', function(){
      callSomeFunc();
});

这样，我就必须用不同的Id将上面的代码写10次。我试着使用循环作为

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click',id, function(){
          callSomeFunc(id);
   });
}

没有用！我怎样才能做到这一点？

不需要将click事件包装在函数中。你可以简单地让它监听点击事件。由于每个id都在调用相同的函数，因此可以用className而不是特定的id:来概括它

 $(document).on('click', 'div', function() {
   callSomeFunc();
 });

Codepen示例

要获得id值，可以使用this.id:

 $(document).on('click', 'div', function() {
    callSomeFunc(this.id)
 });

ID示例

您的函数的即时修复方法，坚持您尝试的方法，是执行以下操作：

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click','#' + i, function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

注意，我已经显式添加了"#"，并且在初始选择器中引用的是索引计数器，而不是"id"。

不过，我建议进行一些改进。你总是可以避免$（文档）的笨拙：

function abc()
   for(var i=1, i<=10, i++){
          $('#' + i).click(function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

此外，您使用身份证的原因是什么？如果你建立一个普通的班级，你可以一下子做到这一切！另外，如果你使用id为不同的按钮提供不同的行为，你可以在事件处理程序中使用$（this）来实现这一点

//This will apply the click handler to every element that has class="someClass"
$('.someClass').click(function(){
        //Do stuff with $($this)
});
相关文章：