Reputation: 92
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
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
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
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