CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hetasbo
hetasbo

Reputation: 92

Something wrong with my toggleclass

There is something wrong with my jQuery script. It kinda works, but when I try to toggle between the classes it works at first. the script changes classes just like it's supposed to. but when i try to do it again, I have to click the link and then somewhere else, and then it works again. I want to be able do repeat the whole procedure over and over without having to click two extra times.

var clickOnSettings = true;
$(".settings_link").click(function () {
    event.preventDefault();
    if (clickOnSettings) {
        $("#coverup").toggleClass("cover1");
        $("#settingani").toggleClass("settings1");
        clickOnSettings = false;
    }
});
$("#coverup").click(function () {
    if (!clickOnSettings) {
        $("#coverup").toggleClass("cover2");
        $("#settingani").toggleClass("settings2");
        clickOnSettings = true;
    }
});

created a jsfiddle:

http://jsfiddle.net/5dzt1v6f/13/

Upvotes: 0

Views: 237

Answers (3)

hetasbo
hetasbo

Reputation: 92

I fixed it!

Not the prettiest code. But this worked I needed to have another class for the settingani and not for the coverup. So I had to do it like this:

        var clickOnSettings = 1;

        $( ".settings_link" ).click(function() { 
            event.preventDefault();
            if (clickOnSettings == 1) {
                $( "#settingani" ).removeClass( "settings0" );
                $( "#coverup" ).addClass( "cover1" );
                $( "#settingani" ).addClass( "settings1" );
                clickOnSettings = 3;
            }
        });
        $( ".settings_link" ).click(function() { 
            event.preventDefault();
            if (clickOnSettings == 2) {
                $( "#coverup" ).removeClass( "cover2" );
                $( "#settingani" ).removeClass( "settings2" );
                $( "#coverup" ).addClass( "cover1" );
                $( "#settingani" ).addClass( "settings1" );
                clickOnSettings = 3;
            }
        });
        $( "#coverup" ).click(function() { 
            if (clickOnSettings == 3) {
                $( "#coverup" ).removeClass( "cover1" );
                $( "#settingani" ).removeClass( "settings1" );
                $( "#coverup" ).addClass( "cover2" );
                $( "#settingani" ).addClass( "settings2" );
                clickOnSettings = 2;
            }
        });

Thanks for all the help! =)

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116200

If you toggle 'cover1', you basically toggle between having and not having 'cover1' on the element. That does not imply that you automatically get cover2 when you remove cover1.

You have to do that yourself. Fortunately, toggleClass has a second parameter that accepts a boolean. This allows you to easily toggle classes on or off based on your conveniently introduced boolean.

Furthermore, this makes the click handler for both elements the same:

var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() { 
    event.preventDefault();
    clickOnSettings = ! clickOnSettings;
    //Toggle all classes.
    $( "#coverup" ).toggleClass( "cover1", clickOnSettings);
    $( "#settingani" ).toggleClass( "settings1", clickOnSettings);
    $( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
    $( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});

http://jsfiddle.net/5dzt1v6f/20/

Upvotes: 2

Akhil
Akhil

Reputation: 479

Why don't you just use addClass and removeClass for what you want to do. 

var clickOnSettings = true;

            $( ".settings_link" ).click(function() { 
                event.preventDefault();
                if (clickOnSettings) {
                    $( "#coverup" ).addClass( "cover1" );
                    $( "#settingani" ).addClass( "settings1" );
                    $( "#coverup" ).removeClass( "cover2" );
                    $( "#settingani" ).removeClass( "settings2" );
                    clickOnSettings = false;
                }
            });
            $( "#coverup" ).click(function() { 
                if (!clickOnSettings) {
                    $( "#coverup" ).addClass( "cover2" );
                    $( "#settingani" ).addClass( "settings2" );
                    $( "#coverup" ).removeClass( "cover1" );
                    $( "#settingani" ).removeClass( "settings1" );
                    clickOnSettings = true;
                }
            });

http://jsfiddle.net/5dzt1v6f/15/

Upvotes: 0

Related Questions