Question

我在HTML中有一个id =＆＃34; button1＆＃34;。

的按钮

我们有JavaScript功能：

$('#button1').click(function() { ... } );

效果很好。

但是如果我们有100个具有不同ID的按钮呢？

我可以复制100x功能。但是，这不是一个非常优雅和良好的解决方案。

如何轻松有效地解决许多按钮的问题？

所有按钮执行的功能相同。

Answer 1

为此添加类绑定：

＆＃13;

$(document).ready(function(){
   //dot (.) selector binds to classes
    $('.boundButton').click(function(){ 
         //clicked button
         var $this = $(this);
        alert($this.attr('id'));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="boundButton">1</button>
<button id="2" class="boundButton">2</button>
<button id="3" class="boundButton">3</button>

＆＃13;

Answer 2

您需要使用类而不是ID。例如，您的JS代码可能如下所示：

$('.button-class').click(function() { ... } );

，您的HTML可能看起来像

<button name='example' class='button-class' id='exampleID'>Button Text</button>

Answer 3

以下是基本示例：

＆＃13;

$(document).ready(function () {
   $(".btn").on("click", function(){ //attach click event to all buttons with class "btn"
       console.log($(this).attr("id")); //$(this) refers to the button clicked
   })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>

＆＃13;

一个功能 - 许多按钮

3 个答案: