jquery - 悬停效果jQuery

Question

我有一堆 li 元素，我想使用奇数和偶数交替颜色，然后根据鼠标悬停突出显示。为了取消突出显示，我需要跟踪颜色曾经是什么，奇数还是偶数。为了在应用突出显示颜色时执行此操作，我首先为其设置一个任意属性。这样做有什么缺点吗？有没有更好的办法？代码如下:

<script type="text/javascript">
var init = function(event){
$("li:odd").css({'background-color' :  '#eeeeee', 'font-weight' : 'bold'});
$("li:even").css('background-color', '#cccccc');  
    //initial colors setup

    $("li").hover(
    function ()   //hover over
    {
        var current = $(this);
        current.attr('old-background', current.css('background-color'));
        current.css('background-color', '#ffee99');

    }
    , function()  //hover out
{
    var current = $(this);
    current.css('background-color', current.attr('old-background'));
})

}
$(document).ready(init);
</script>

那么有没有更好的方法来做到这一点？

Answer 1

我同意 Benlumley 的观点，你应该使用 addClass/removeClass 方法。

你的CSS可能看起来像，

li {
    font-weight: bold;
}

li.odd {
    background-color: '#eee';
}

li.even {
    background-color : '#ccc';
}

li.hover {
    background-color : '#ffee99';
}

您的 init 函数现在看起来像，

var init = function(event)
{
    $('li:odd').addClass('odd');
    $('li:odd').addClass('even');

    $('li').hover(  function()
                    {
                        $(this).addClass('hover');
                    },
                    function()
                    {
                        $(this).removeClass('hover');
                    }
                   );

}

此代码的优点是，如果您想更改这些列表项的外观样式，您可以转到 CSS 代码并更改颜色，而无需触及 JS 代码!