把背景换成拼图，为什么只运行一次？找不到原因

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

(如果我很好地理解您的问题：)

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