jQuery if statement inside click function

Question

I have a click event inside of which I would like to load different divs according to what has been clicked:

var open = $('.open');
open.click(function(evt) {
    evt.preventDefault();
    overlay.fadeIn(400, function(){
        box.fadeIn(500);
        // if something load box2
        // if something load box3
    });

http://jsfiddle.net/bLDXS/

Open is a class given to the links which relate to box, box2 and box3. How can I load the content for box2, would I have to use a specific class for each of them?

I don't understand the question. Are you asking how to write an if condition? — Rory McCrossan
– Rory McCrossan, Commented Oct 25, 2012 at 10:21
You need to post the html that corresponds to your posted code so we can help you — Nelson Benítez León
– Nelson Benítez León, Commented Oct 25, 2012 at 10:22
I know how to write one, but how specifically in this case to load either box1, or box2 or box3? — Aessandro
– Aessandro, Commented Oct 25, 2012 at 10:22
yo, check your DOM class .open is not there in HTML! :) how do you trigger click event? — Tats_innit
– Tats_innit, Commented Oct 25, 2012 at 10:28

bool.dev · Accepted Answer · 2012-10-25 10:49:44Z

1

Edit: After looking at the fiddle, you'll have to give each clickable <p> an id, and load the corresponding box.

Html:

<p class="terms open" id="box1_clicker">I agree to the <a href="">terms and conditions.</a></p>

Js:

if($(this).attr("id")=="box1_clicker") {
    // do something
}

Example fiddle

You could specify an id for each of the boxes, and then check inside the click which box's link was clicked, using jquery's parent():

if($(this).parent().attr("id") == "box1") {
    //some code
}
else if ($(this).parent().attr("id") == "box2") {
    //some code
}
// so on

edited Oct 25, 2012 at 10:49

answered Oct 25, 2012 at 10:32

bool.dev

17.5k5 gold badges71 silver badges93 bronze badges

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

Comments

Divick · Accepted Answer · 2012-10-25 10:27:18Z

1

Open is a class given to the links which relate to box, box2 and box3. How can I load the >content for box2, would I have to use a specific class for each of them?

No, you can simply write your code with if statement:

var open = $('.open');
open.click(function(evt) {
   evt.preventDefault();
    overlay.fadeIn(400, function(){
    box.fadeIn(500);
    if (cond1){ load box2 }
    else if (cond2) {load box3 }
});

answered Oct 25, 2012 at 10:27

Divick

1,2732 gold badges22 silver badges44 bronze badges

2 Comments

Aessandro Over a year ago

would the condition 1 be another click event saying if you click on .box2(for example) do this.....

Divick Over a year ago

No the condition cannot be another click event. I think your question so not clear enough. From what it seems you want to distinguish between which div / box generated the even and based on that condition you want to show some UI manipulations. If that is that case then you can check for id with $("this").attr('id') if using jquery.

nix · Accepted Answer · 2012-10-25 10:36:22Z

1

Try this:

var open = $('.open');
open.click(function(evt) {
    evt.preventDefault();
    box= $(this).attr('rel');//get the rel of your clicked link.
    overlay.fadeIn(400, function(){
        $('#'+box).fadeIn(500);//fadein the div your link relates to if it is your div's id.

    });

edited Oct 25, 2012 at 10:36

answered Oct 25, 2012 at 10:28

nix

3,3022 gold badges24 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery if statement inside click function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related