How to use single function to multiple classes?

Question

I've got this following code:

<script type="text/javascript">
    $(document).ready(function(){
        $('.sample1').click(function(){
            $('.dropdown-content').toggleClass('visible-dropdown');
        })
    })
</script>

It adds class so I can get some animations with mouse click event. I have some more classes in HTML like 'sample2', 'sample3', etc. and would like to add exactly the same animations (classes of course has different content).

I know one solution, namely just add in same code n-times, but change class for each block of code. Is there a shorter way? I thought maybe something with arrays, not sure. I'm not really good in JS, it's like my first time ;)

See multiple selection with jQuery https://api.jquery.com/multiple-selector/ — djfdev, Jul 06 '17 at 20:34
Simply one way, `$(".sample1, .sample2, .sample3").click(..` — ibubi, Jul 06 '17 at 20:36
Possible duplicate of [jQuery - Selecting Multiple Classes](https://stackoverflow.com/questions/488305/jquery-selecting-multiple-classes) — Andrew Myers, Jul 06 '17 at 21:04

score 0 · Answer 1 · answered Jul 06 '17 at 20:36

You can edit your code to take multiple selectors.

<script type="text/javascript">
    $(document).ready(function(){
        $('.sample1, .sample2, .sample3').click(function(){
            $('.dropdown-content').toggleClass('visible-dropdown');
        })
    })
</script>

score 0 · Accepted Answer · answered Jul 06 '17 at 20:39

0

You can just group the classes, separated by commas. Example :

$('.sample1, .sample2, .sample3').click(function(){

answered Jul 06 '17 at 20:39

Nic Bonetto

543
1
8
20

okay, that's the easiest way and it solves my question ;) but after added to my code it works for every class I wrote and I didn't expect that when I was writing question... E.g. now when element with class 'sample3' is clicked I'd like to make animation just to that one class. I think it doesn't work, because the 'dropdown-content' class is added in each 'samples' classes (this is stupid hah). Is there still way to make it in one function? ;) – wolnio Jul 06 '17 at 21:05
I need to see more of your code to answer accurately because I can't see the side effects you are describing. But my first intuition to answer your problem is using jQuery's `$(this)` selector. Like I said, I would need to see more of your code to tell you how to implement it. – Nic Bonetto Jul 06 '17 at 21:26
I'd like to get similar effect like on this site: [link](http://kursjs.pl/kurs/wstep/wstep.php). When I click one of options on the sidebar navigation, it will show `
– wolnio Jul 07 '17 at 12:07
Why are you using jQuery for this project? It seems simple enough to use vanilla JavaScript. Is there a reason for using jQuery? – Nic Bonetto Jul 08 '17 at 05:21
Noo, there isn't. I'm just totaly new in JS and this code to add class (toggleClass) I found in google tutorials ;) – wolnio Jul 08 '17 at 16:15

Beri · Answer 3 · 2017-07-06T20:48:00.920

0

Simply use multiple selectors:

$('.sample1, .sample2 , .sample3').click(function(){
   $('.dropdown-content').toggleClass('visible-dropdown');
})

You could try

$('*[class*="sample"]')

This is the source

edited Jul 06 '17 at 20:48

answered Jul 06 '17 at 20:40

Beri

11,470
4
35
57

score 0 · Answer 4 · answered Jul 06 '17 at 20:52

You can use css selectors:

Catch the elements which have classes started with 'sample':

$('[class^=sample]').on('click',function(){

    //Do something
});

Catch the elements which have classes ended with 'sample':

    $('[class$=sample]').on('click',function(){

    //Do something
    });

To find more information about css selectors: https://www.w3schools.com/cssref/css_selectors.asp

How to use single function to multiple classes?

4 Answers4