Поменяйте местами фон для круговой диаграммы, зачем запускать только один раз? не могу понять, почему

Question

Сценарий:

$("#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).hasClass('four'))
    {
            $('#piechart').addClass('piechart-four').removeClass(className);
        }
});

Извините, код такой нубский ручной труд, я просто не могу понять, как перейти к следующему 'li' в jQuery и вызвать конкретный класс CSS. Я действительно очень ценю это, если вы, ребята, сможете показать мне правильный способ сделать это.

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>

Таким образом, класс по умолчанию, вызываемый, когда страница, открытая на первом месте, называется 'piechart-one'

Answer 1

(Если я хорошо понял ваш вопрос:)

WORKING DEMO

используемый код:

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

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

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

с li изменением цвета

DEMO2

код:

$('#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');
});

Просто добавьте класс CSS .active и в своем jQuery переключите класс,Посмотрите на демо.

Но я сделаю это немного более навороченно:

DEMO3

Answer 2

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