jQuery SVG removeClass()

Question

Ok after hours and hours trying to figure out a way to do this, I have come up with nothing. I knew that I need the SVG jQuery plugin so I have that and have gotten the toggleClass() function to work, but I'm trying to remove classes from all of my group elements and then add another class to the group elements as well:

$('g').removeClass().addClass('slice');

I came upon this line of code from the removeClass documentation on the jQuery site.

Ultimately my desire is to have this Pie Chart of skills that when a slice is clicked, it is slightly removed from the pie until another slice is clicked. Once another slice is clicked then the previous slice is returned to the pie and the newly clicked slice is pulled out. You can see what I'm getting at by checking out my jsFiddle. I've managed to get the slices to pull out, but where I'm struggling is getting them to slide back in when another slice is clicked.

jsFiddle Example: http://jsfiddle.net/jrjacobs24/BhWCh/30/

I've been trying to go throuh the documentation for Keith Wood's plugin here:

http://keith-wood.name/svg.html#dom

but just haven't had any luck. Any help would be greatly appreciated. Let me know if anything is vague or needs clarity. Thank you in advance!

Answer 1

Try this:

$('g').attr("class","").addClass('slice');

Answer 2

You should better consider .clicked as a state/class for your .slice elements. There is no need to remove .slice class.

Have a look to this fiddle : http://jsfiddle.net/sinsedrix/AKXTV/

Answer 3

Instead of g , use id selector for jquery.

Answer 4

try this:

$(".slice").click(function () {

    $('g').attr("class","").addClass('slice');

    if ($(this).is("#HTML_1_")) {            
        $(this).toggleClass("HTML_1_clicked");
    } else if ($(this).is("#Wordpress")) {            
        $(this).toggleClass("Wordpress_clicked");
    } else if ($(this).is("#jQuery")) {           
        $(this).toggleClass("jQuery_clicked");
    } else if ($(this).is("#java_1_")) {            
        $(this).toggleClass("java_1_clicked");
    } else if ($(this).is("#Dreamweaver")) {            
        $(this).toggleClass("DW_clicked");
    } else if ($(this).is("#Photoshop")) {           
        $(this).toggleClass("PS_clicked");
    } else {            
        $(this).toggleClass("CSS_clicked");
    }
});

working fiddle here: http://jsfiddle.net/BhWCh/31/