a single click-event for multiple functions

Question

I have the following code:

$('#picture-div').click(function(){
    $('#div-in-document').fadeToggle('slow', $func1);
});
$('#picture-div2').click(function(){
    $('#div-in-document2').fadeToggle('slow', $func2);
});

I'm trying to make this into one single click event, but can't seem to make it work. I've tried the following:

$('#picture-div ,#picture-div2').click(function(){
    if($(this) == '#picture-div')
        $('#div-in-document').fadeToggle('slow', $func);
    else
        $('#div-in-document2').fadeToggle('slow', $func2);
});

But that always go to the else, so my if-statement is invalid.

Thanks.

moonwave99 · Accepted Answer · 2013-07-06 13:58:54Z

3

Change your markup using data-* attributes like:

<div class="picture-div" data-target="someId">...</div>
<div class="picture-div" data-target="someOtherId">...</div>

And your js will be just:

var yourFunctions = {
  someId : function(){...}.
  someOtherId : function(){...}
}

$('.picture-div').click(function(){
  var target = $(this).data('target');
  $('#' + target).fadeToggle('slow', yourFunctions[target]);
});

Maintainability is safe, hoorray.

answered Jul 6, 2013 at 13:58

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nilzone- Over a year ago

Looks like the person who was correct deleted his post(?). Anyway, I tried this, and it worked very well, thank you!

Aman Chhabra · Accepted Answer · 2013-07-06 13:55:34Z

0

Try this instead and I hope it will work

$('#picture-div ,#picture-div2').click(function(){
    if($(this) == $('#picture-div'))
        $('#div-in-document').fadeToggle('slow', $func);
    else
        $('#div-in-document2').fadeToggle('slow', $func2);
});

I have not tested it but I am pretty sure that it will work

answered Jul 6, 2013 at 13:55

Aman Chhabra

3,9241 gold badge25 silver badges39 bronze badges

4 Comments

Nilzone- Over a year ago

If I click one, both is displayed, so not working. The same happens with Zenith suggestion

Aman Chhabra Over a year ago

Can you please paste the code for your div as well because according to me the above code should work

Nilzone- Over a year ago

heres the fiddle: jsfiddle.net/Nilzone/cvHdQ (line 32-35 is the relevant code)

Aman Chhabra Over a year ago

but I think this is the same as I have written above. Please let me know if there is some difference

Oleksii Aza · Accepted Answer · 2013-07-06 14:01:31Z

0

Maybe something like this:

$('#picture-div ,#picture-div2').click(function(){
    if($(this).attr("id") == '#picture-div')
        $('#div-in-document').fadeToggle('slow', $func);
    else
        $('#div-in-document2').fadeToggle('slow', $func2);
});

Or you can make a kind of mapping:

var arr = [ { selector: "#picture-div", subselector: "#div-in-document", func: $func1},
            { selector: "#picture-div2", subselector: "#div-in-document2", func: $func2}]

and go through it for assigning handler:

for(int i = 0; i < arr.length; i++)
{
    $(arr[i].selector).click(function(){
      $(arr[i].subselector).fadeToggle('slow', arr[i].func);
   });
}

edited Jul 6, 2013 at 14:01

answered Jul 6, 2013 at 13:55

Oleksii Aza

5,40831 silver badges35 bronze badges

Collectives™ on Stack Overflow

a single click-event for multiple functions

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related