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代码！

Answer 2

您应该使用addClass和removeClass来实现此目的，而不是直接操作CSS。

<style>
  li.hover {
    background-color: #ffee99 !important;
  }
</style>

<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
      {
        $(this).addClass('hover');

      }
      , function()  //hover out
      {
        $(this).removeClass('hover');
      })
    }
    $(document).ready(init);

Answer 3

您可以引入一个名为highlighted的CSS类，并调用current.addClass('highlighted')添加鼠标悬停在current.removeClass('highlighted')上以删除悬停的类。我假设你也在你的CSS文件中添加奇数和偶数类。

<script type="text/javascript">
var init = function(event){
    //initial colors setup
    $("li:odd").addClass('odd');
    $("li:even").addClass('even');  

    $("li").hover(
        function ()   //hover over
        {
                $(this).addClass('highlighted');

        }
        , function()  //hover out
        {
                $(this).removeClass('highlighted');
        })

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

highlighted应在文件中的even和odd类之后声明，以便能够覆盖默认颜色。

Answer 4

喜欢其他哟也可以使用

$("li:odd").toggleClass("odd");

或

$("li:even").toggleClass("odd");

如果您想更改第一个项目的颜色。（你也可以先用我认为）

悬停效果jQuery

4 个答案: