如何在jquery中使用click事件切换id？

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:

我正在寻找Jquery中的开关,就像这个伪代码:

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.

如果单击span 1,则会发生某些事情。如果单击span 2,则会发生其他情况。每个span都有一个id,但这应该适用于任何元素,无论是div span还是其他。例如,如果单击具有给定id的div,则x发生,如果单击具有给定id的span,则y发生。

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.

这样做的关键是不必做1000 $(“#blabla”)。点击(功能等等......)这一点正在对它们进行分组,因为它们具有非常相似的行为。

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.

在我的情况下,我想要做的是,如果给定具有给定id的元素被点击,则增加给定隐藏元素值。如果单击另一个具有另一个id的元素,则会发生SAME。除此之外,可能还需要执行一些CSS。

4 个解决方案

#1

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

是的,使用class绑定click事件(或列出所有id)

<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;
    }
});

#2

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

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

#3

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

你可以使用@Justinas中的代码但是没有意义,因为这段代码:

$('.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);

#4

Try this

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

        //etc..
    }
}

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

#1