CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sreepurna
sreepurna

Reputation: 1662

Call single function for multiple classes

I have two buttons: one with class btn-star, and the other with btn-current. I am calling an independent function on each of their clicks. But now, I want to call only one function when they are called.

My code is similar to this:

$('document').ready(() => {
 $(document).on('click', '.btn-star', function () {
    // Do stuff
 }
 $(document).on('click', '.btn-current', function () {
    // Do stuff
 }
}

Upvotes: 0

Views: 2680

Answers (8)

Laxmi Priyam Dubey
Laxmi Priyam Dubey

Reputation: 59

You can try

    $('.btn-star , .btn-current').on('click', function () {
        //do something common for elements
    });

Upvotes: 0

Lorddirt
Lorddirt

Reputation: 470

Why is [Javascript] tagged on this post? If it is meant to be there, I'm assuming you are going to accept javascript responses right?

If you're going javascript, it is much easier, and you can just add a onClick='function()' to your html code and do your functions in there.

<html>
<head>
<script>
function buttonFunction(buttonName){
//EDIT 3.0: You can make one button do the same as the other button, but you can also make it do something else at the same time!
if(buttonName == 'btn-star'){
//other code such as:
alert("Stars are awesome!");
}
alert("You just clicked " + buttonName);
}
</script>
</head>
<body>
<div id='button1'>
<button id='btn-star' onclick='buttonFunction("btn-star")'>btn-star</button>
</div>
<br/>
<div id='button2'>
<button id='btc-current' onclick='buttonFunction("btn-current")'>btn-current</button>
</div>
</body>
</html>

If you want, you can also additionally make one button do the same as the other, and then after that do something different like I did in this snippet.

P.S: I'm just assuming javascript is allowed, because after all, it is tagged on this post.

EDIT: I showed you an example of one button doing slightly differently then the other, but still the same in a way

ANOTHER EDIT: You can do a lot of stuff with this, added ideas on what else you could do with this snippet.

Upvotes: 0

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You can try this code. You can use multiple elements click event for one action with only one line code, Just use a comma for separating elements

 $('document').ready(() => {
     const myFunction= () => {
         // Your Code here...
        }
     $(document).on('click', '.btn-current, .btn-current', function () {
        myFunction();
     }
    }

Upvotes: 3

anjaneyulubatta505
anjaneyulubatta505

Reputation: 11665

Try below code

 $('.btn-star, .btn-current').on('click', function () {
    // Do shared stuff
 });

Reference: http://api.jquery.com/on/

Upvotes: 0

Mohammed Gadi
Mohammed Gadi

Reputation: 391

A little shorter code...

  $('document').ready(() => {
    function commonFunc() {
        //do stuffs here
    }

    $('.btn-star, .btn-current').on('click', commonFunc);
    }

Upvotes: 1

Fernando Souza
Fernando Souza

Reputation: 1779

If you want to call the same function you can select your two button classes, using a simple j-query expression: 

$('.btn-star, .btn-current').click(function() {
 // Do stuff
}

Ad your selectors separated by a comma, inside the quotation marks.

You can read more about j-query selector at this link: https://www.sitepoint.com/comprehensive-jquery-selectors/

Upvotes: 1

Therichpost
Therichpost

Reputation: 1815

you can try like this:

    function test()
    {
     //your code
    }

    $(".btn1, .btn2").on("click", funciton(){
      test();
    });

Upvotes: 0

Abrar
Abrar

Reputation: 7232

You can define a function separately and pass it in as callback for both buttons' on click handler. For example - 

$('document').ready(() => {
 const commonFunc = () => {
     // do common stuffs here
 }
 $(document).on('click', '.btn-star', commonFunc());
 $(document).on('click', '.btn-current', commonFunc());
}

Hope that helps!

Upvotes: 1

Related Questions