Swap background for piechart diagram, why only run once ? can't figure out why

The script :

$("#listchart li").mouseover(function()
{
        if($(this).hasClass('one'))
    {
            $('#piechart').addClass('piechart-one').removeClass(className);
        }

        if($(this).hasClass('two'))
    {
            $('#piechart').addClass('piechart-two').removeClass(className);
        }
        if($(this).hasClass('three'))
    {
            $('#piechart').addClass('piechart-three').removeClass(className);
        }

        if($(this).hasCla开发者_JAVA百科ss('four'))
    {
            $('#piechart').addClass('piechart-four').removeClass(className);
        }
});

Sorry, the code is such a noob manual labor, I just can't figure out how to go to next 'li' in jQuery & call specific CSS class. I'd really really really appreciate it if you guys can show me the proper way to do this.

The HTML :

<div id="piechart" class="piechart-one">

<div id="listchart">
<ul>
<li class="one"><a href="">SubTitle-1</a></li>
<li class="two"><a href="">SubTitle-2</a></li>
<li class="three"><a href="">SubTitle-3</a></li>
<li class="four"><a href="">SubTitle-4</a></li>

</ul>
</div>

</div>

So default class being called when the page opened at first place is 'piechart-one'

( If I understood your question well: )

WORKING DEMO

code used:

$('#listchart li').hover(function(){

    var takeClass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-'+takeClass );

},function(){
    $('#piechart').attr('class', 'piechart-one' );
});

With li color change

DEMO2

code:

$('#listchart li').hover(function(){

    var takeClass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-'+takeClass );
    $(this).toggleClass('active');

},function(){
    $('#piechart').attr('class', 'piechart-one' );
    $(this).toggleClass('active');
});

Just add a CSS class .active and in your jQuery toggle the class. Look at the demo.

But I'll do it a bit more fancy:

DEMO3

$("#listchart li").mouseover(function(){
    var newclass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-' + newclass);
});