CODEWITHSUNDEEP
jqueryif-statement
ocat
ocat

Reputation: 201

jQuery if else statement issue

I am new to jQuery. I am trying to get this if else statement to run but I can only seem to get one half of the if else statement to work.

$("#og").click(function () {
    if ($('#og').data('clicked')) {
        //#og element clicked run function #1
        $("#about").click(function () {
            $("#about").animate({ 'top': -1130 }, 2000);
            $("#aboutform").animate({ 'top': -1120 }, 2000);
            alert("running click code")
        });
    } else { //#og element not clicked run function #2
        $("#about").click(function () {
            $("#about").animate({ 'top': -1190 }, 2000);
            $("#aboutform").animate({ 'top': -1170 }, 2000);
            alert("running no click code")
        });
    }
});

I want to check if a div(#og) has been clicked. If it has I want it to animate #about and #aboutform to a position when #about is clicked. If #og has not been clicked I want it to animate #about and #aboutform to another position when #about is clicked.

Upvotes: 0

Views: 163

Answers (6)

Jason P
Jason P

Reputation: 27022

Based on your edit of what you're attempting to do, I think this would be a better solution. Binding event handlers in event handlers is generally not the best approach:

$('#og').click(function() { $(this).data('clicked', true); });

$('#about').click(function() { 
    var aboutTop = -1190;
    var aboutFormTop = -1170;
    if ($('#og').data('clicked')) {
        aboutTop = -1130;
        aboutFormTop = -1120;
    }

    $("#about").animate({ 'top': aboutTop }, 2000);
    $("#aboutform").animate({ 'top': aboutFormTop }, 2000);
});

Upvotes: 2

Adam Wolski
Adam Wolski

Reputation: 5676

So basically you have logic error in your code:

$("#og").click(function(){});

this function is callback for a click event. So when the user clicks element #og this function is called. What you are trying to do is run some code when user didn't clicked #og (I assume) inside callback function for clicking #og. That doesn't make sense at all.

I think better approach would be running some code until the user clicked #og element and then run some other code.

Upvotes: 1

Daniel
Daniel

Reputation: 365

I'm not exactly sure what you're trying to accomplish here. It seems you're listening to a click event on #og, however the event will only be triggered if there's a click, so it's unclear why you check for the data attribute clicked to be set to anything.

It should be sufficient for you to just do:

$('#og').click(function() { // do things on click
});

There will be no case where anything is fired if it's not clicked.

Upvotes: 1

jtimperley
jtimperley

Reputation: 2544

The code above only executes when $("#og") is clicked, thus within the function $(this) is always $("#og"). Since you are always setting 'clicked' to true on $(this) the condition involving $("#og") will always be true.

Upvotes: 1

Sergio
Sergio

Reputation: 28845

This does not make sense to me:

$("#og").click(function () { // clicked
    $(this).data('clicked', true); //assign true 
    if($('#og').data('clicked')) { //question if true? you just assigned true to it

This will not go to else.

Upvotes: 3

Lochemage
Lochemage

Reputation: 3974

you set $(this).data('clicked', true); and then you immediately check if the click value is true or not. It looks to me like you will never see that second else block happen since you never set clicked to false.

Upvotes: 4

Related Questions