Adding and Removing Multiple Classes

Question

I want to add/remove three css classes plus a default classes. Example: When I click on the first anchor it adds a new class called style1 and removes the default style, when I click on the second anchor it removes style1 and adds style2, and the same for anchor3.

The problem is if I start by clicking on anchor3, nothing happens, I cannot reverse the action.

How can I make this work so that the add/remove classes works regardless of which link I click first? I need to use the three styles but also need a default style.

Here is the code on JFiddle: http://jsfiddle.net/VadUE/2/

It works in the browser but not on JFiddle.

Code:

$(document).ready(function() { $('.anchor1').click(function() { $('p').addClass('style1').removeClass('default'); $('.anchor2').click(function() { $('p').addClass('style2').removeClass('style1'); $('.anchor3').click(function() { $('p').addClass('style3').removeClass('style2'); }); }); }); }); <style type="text/css"> .style1{ color: #FF8000; } .style2{ color: #F36; } .style3{ color: #00F; } .default{ color: #0C0; } </style> <a class="anchor1" href="#/">Link1</a> <a class="anchor2" href="#/">Link2</a> <a class="anchor3" href="#/">Link3</a> <p class="default">This is a sequence into a sound</p>

why are you nesting your event binding?

chovy
– chovy

2012-10-06 07:20:51 +00:00
Commented Oct 6, 2012 at 7:20 — chovy
– chovy, Commented Oct 6, 2012 at 7:20

Blender · Accepted Answer · 2012-10-06 07:06:29Z

I'd change your HTML a little bit:

<a class="anchor" href="#/">Link1</a> <a class="anchor" href="#/">Link2</a> <a class="anchor" href="#/">Link3</a>

And then just use this simple JS code:

$(document).ready(function() { $('.anchor').click(function() { $('p').attr('class', 'style' + ($(this).index() + 1)); }); });

Demo: http://jsfiddle.net/VadUE/4/

The problem with your original code was that you were binding the event handlers strangely (one is bound only after another one is triggered). You want to bind them all one-by-one.

KooiInc · Accepted Answer · 2012-10-06 09:33:02Z

In your jsfiddle, you have chosen the mootools library.
In the ready method you are nesting all click actions.
If you remove a class, the classname to remove has to be retrieved.

Fixing this (and removing the need for ready call by placing the script at the bottom of the page), you end up with:

$('.anchor1').on('click',function(){ $('p').removeClass(function() { return $(this).attr('class'); }).addClass('style1'); }); $('.anchor2').click(function(){ $('p').removeClass(function() { return $(this).attr('class'); }).addClass('style2'); }); $('.anchor3').click(function(){ $('p').removeClass(function() { return $(this).attr('class'); }).addClass('style3'); });

See jsfiddle

Using a single className for the links and adding an numeric id you would only need one handler:

$('.anchor').on('click',function(){ $('p').removeClass(function() { return $(this).attr('class'); }).addClass('style'+this.id); });

See jsfiddle

Thank you, now I wish I knew how to add cookies to make this action stay. I'll do another post. Thanks again!

techfoobar · Accepted Answer · 2012-10-06 07:04:32Z

The problem is that you are binding the click handlers for your second and third links from inside the click handler for the first. This means your second and third links will start working only after you click on the first one.

Your Current Code

$('.anchor1').click(function() { $('p').addClass('style1').removeClass('default'); $('.anchor2').click(function() { $('p').addClass('style2').removeClass('style1'); $('.anchor3').click(function() { $('p').addClass('style3').removeClass('style2'); }); }); });

Should be changed to

 $('.anchor1').click(function() { $('p').addClass('style1').removeClass('default'); }); $('.anchor2').click(function() { $('p').addClass('style2').removeClass('style1'); }); $('.anchor3').click(function() { $('p').addClass('style3').removeClass('style2'); });

StaticVariable · Accepted Answer · 2012-10-06 07:06:03Z

You are using wrong binding

$('.anchor1').click(function() { $('p').addClass('style1').removeClass('default'); } $('.anchor2').click(function() { $('p').addClass('style1').removeClass('style1'); }

or you can use

 $('a[class^=anchor]').click(function() { $('p').addClass('style'+this.id).removeClass($(this).attr("class")); }

Collectives™ on Stack Overflow

Adding and Removing Multiple Classes

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related