交换饼图的背景，为什么只运行一次？无法弄清楚为什么

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);
        }
});

对不起，代码就是这样一个noob手工劳动，我只是无法弄清楚如何在jQuery＆amp;中找到下一个'li'。调用特定的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);
});