0

これは主に、これをGoogleに伝える方法がわからないためだと思いますが、基本的には、メニュー項目ごとに異なるホバー背景色を使用するメニューを構築しようとしています. 私はこれまでのところこれを持っています：

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

'#f00' を、選択されているメニュー項目に基づいて別の値に置き換えたいと考えています。:eq を使用して項目ごとに異なるメソッドを記述できることはわかっていますが、それを行うためのより凝縮された方法があれば、それが優先されます。色の値の配列のように考えていたので、関数はインスタンスの数を配列[インスタンスの数]に置き換えます。うまくいけば、それは理にかなっています...

4

1 に答える 1

2

このようなものが動作するはずです:

$(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);
    });
});
于 2012-08-19T08:31:49.597 に答える