javascript - How can I make a switch for ids with a click event in jquery? - Stack Overflow

admin管理员组

文章数量:1279214

I have been looking for this quite a long time here so I might as well ask.

I'm looking for a switch in Jquery like this pseudocode:

switch($(idvariable).click)
{
     case $someid: break; //if the user clicked this id, something happens
     case $someotherid: break; // if the user clicked another id with name "someotherid"
     case $yetanotherid: break; // ditto
}

Is this possible?

The expected behavior is the following:

If span 1 is clicked something happens. If span 2 is clicked something else happens. Each span has an id, but this should apply to any element be it div span or whatever. For instance if div with given id is clicked then x happens, if span with given id is clicked then y happens.

The point of doing this is not having to do 1000 $("#blabla").click( function etc... The point is grouping them since they have very similar behaviour.

In my case what I want to do is if given element with given id is clicked then increment given hidden element value. The SAME happens if another element with another id is clicked. In addition to this some CSS may have to be performed.

I have been looking for this quite a long time here so I might as well ask.

I'm looking for a switch in Jquery like this pseudocode:

switch($(idvariable).click)
{
     case $someid: break; //if the user clicked this id, something happens
     case $someotherid: break; // if the user clicked another id with name "someotherid"
     case $yetanotherid: break; // ditto
}

Is this possible?

The expected behavior is the following:

If span 1 is clicked something happens. If span 2 is clicked something else happens. Each span has an id, but this should apply to any element be it div span or whatever. For instance if div with given id is clicked then x happens, if span with given id is clicked then y happens.

The point of doing this is not having to do 1000 $("#blabla").click( function etc... The point is grouping them since they have very similar behaviour.

In my case what I want to do is if given element with given id is clicked then increment given hidden element value. The SAME happens if another element with another id is clicked. In addition to this some CSS may have to be performed.

• javascript
• jquery
• syntax

Share Improve this question Follow edited May 11, 2015 at 9:17 Jose Luis asked May 11, 2015 at 8:53 Jose LuisJose Luis 3,36133 gold badges3838 silver badges5454 bronze badges 12

• Where are you stuck? What did you tried? – A. Wolff Commented May 11, 2015 at 8:56
• you could use .toggle(). this function toggle state of a class, or anything. – Alex Commented May 11, 2015 at 8:57
• @Alex toggle event has been removed from jQuery 1.9: api.jquery./toggle-event And anyway, seems this has nothing to do with question (but with title i'd say yes...) ;) – A. Wolff Commented May 11, 2015 at 8:57
• you are kidding me ? oh ok then I should learn from answers here ;) – Alex Commented May 11, 2015 at 8:58
• I am stuck as I don't know how to proceed. It's not that I haven't tried anything I have tried! I have looked for the answer here in SO and elsewhere and I didn't find anything. I'm not asking for fun you know... – Jose Luis Commented May 11, 2015 at 9:05

 |  Show 7 more ments

4 Answers 4

Sorted by: Reset to default 6

$(document).on('click', 'selector', function() {
    var id = $(this).attr('id');

    switch(id) {
        case 'home': 
            //
            break;
        case 'contact':
            //
            break;
        default:
            console.log('No id');
    }
});

You can use the code from @Justinas but it makes no sense, since this code:

$('.click-me').click(function () {
    switch ($(this).attr('id')) {
        case 'a1':
             doSomethingA();
             break;
        case 'a2':
             doSomethingB();
             break;
        case 'a3':
             doSomethingC();
             break;
    }
});

can and SHOULD (for readability purposes) be replaced with:

$('#a1').click(doSomethingA);
$('#a2').click(doSomethingB);
$('#a3').click(doSomethingC);

Yes, use class to bind click event (or list all id's)

<button class='click-me' id='a1'>1</button>
<button class='click-me' id='a2'>2</button>
<button class='click-me' id='a3'>3</button>

$('.click-me').click(function () {
    switch ($(this).attr('id')) {
        case 'a1':
             break;
        case 'a2':
             break;
        case 'a3':
             break;
    }
});

Try this

function callSwitch(value) {
    switch(value) {
        case 'someid':
        break;

        //etc..
    }
}

$(".switchclick").on('click', function() {
    var myid = $(this).prop('id');
    callSwitch(myid);
});

本文标签： javascriptHow can I make a switch for ids with a click event in jqueryStack Overflow