jquery - 交换饼图背景，为什么只运行一次？不知道为什么

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

抱歉，代码是如此的菜鸟体力劳动，我只是不知道如何在 jQuery 中转到下一个“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

（如果我很好地理解了你的问题：）

工作演示

使用的代码：

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

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

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

随着li颜色变化

演示2

代码：

$('#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 中切换该类。看演示。

但我会做得更花哨：

演示3

Answer 2

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