一种功能-许多按钮

Question

I have in HTML a button with id="button1".

We have JavaScript function:

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

It works well.

But what if we have 100 buttons with different IDs?

I can duplicate 100x function. However, this is not very elegant and good solution.

How to easily and effectively solve a problem for many buttons?

The function performed is the same for all buttons.

Answer 1

Add a class bind to this:

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

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

Answer 2

You need to use a class instead of ID. For example, your JS code could look like:

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

and your HTML might look like

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

Answer 3

Here is the basic example:

 $(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 }) }) 

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