jquery - jQuery检查实例数

Question

所以我想这主要是因为我不知道如何用谷歌来表达它，但基本上我正在尝试构建一个菜单，为每个菜单项使用不同的悬停背景颜色。到目前为止我有这个：

$(function() {
    $('li').hover(function() {
        $(this).animate({backgroundColor:'#f00'},200);
    }, function() {
        $(this).animate({backgroundColor:'#eee'},200);
    });
});

我想根据选择的菜单项用不同的值替换“#f00”。我知道我可以使用 :eq 为每个项目编写不同的方法，但如果有更简洁的方法可以做到这一点，那将是首选。我在想一个颜色值数组，然后该函数将用数组 [实例数] 替换实例数。希望这是有道理的......

Answer 1

像这样的东西应该工作：

$(function() {
    var colors = ['#FFF', '#GGG', ...];

    $('li').hover(function() {
        $(this).animate({backgroundColor: colors[$(this).index()]}, 200);
    }, function() {
        $(this).animate({backgroundColor: '#eee'},200);
    });
});

$(this).index()返回当前元素相对于其父元素的索引。

---

一个稍微干净的方法是使用data属性：

HTML：

<li data-hover="#FFF">...</li>
<li data-hover="#GGG">...</li>

JS：

$(function() {
    $('li').hover(function() {
        $(this).animate({backgroundColor: $(this).data('hover')}, 200);
    }, function() {
        $(this).animate({backgroundColor: '#eee'},200);
    });
});