Question

我想实现以下目标：

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

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

现在我想添加＆＃39; onlick＆＃39;事件到所有这些按钮，像这样

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

无济于事！我怎样才能做到这一点？

Answer 1

无需将click事件包装在函数中。您可以让它听取点击事件。由于每个id都调用相同的函数，因此可以通过className而不是特定的ID来概括它：

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

Codepen Example

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

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

ID Example

Answer 2

您的功能的即时修复，坚持您尝试的方式，是执行以下操作：

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

注意我已经添加了＃＆＃39;＃＆＃39;明确地指的是你的索引计数器不是＆＃39; id＆＃39;在初始选择器中。

但是，我会推荐一些改进。你总是可以避免$（文件）笨拙：

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

还有一个原因是你使用ID吗？如果你设置了一个普通的课程，你可以一举完成这一切！另外，如果您使用id为不同的按钮提供不同的行为，您可以使用$（this）在事件处理程序中执行此操作

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

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

2 个答案: