Question

所以我猜这主要是因为我不知道如何向Google说出这一点，但基本上我正在尝试为每个菜单项构建一个使用不同悬停背景颜色的菜单。到目前为止我有这个：

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

jQuery检查实例的数量

1 个答案: