эффект наведения 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';
}

Ваша функция инициализации теперь будет выглядеть так:

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

Вы можете ввести класс CSS с именем highlighted и вызвать 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");

если вы хотите изменить цвет первого элемента. (также вы можете использовать сначала, я думаю)