0

div (foo#) のリストを選択し、ホバー時に別の div (zxcv#) をフェードインしようとしています。javascript で var を割り当てましたが、最終的な効果は foo6 にしか表示されませんか?

<div class="foo1"><div class="zxcv1"></div></div>
<div class="foo2"><div class="zxcv2"></div></div>
<div class="foo3"><div class="zxcv3"></div></div>
<div class="foo4"><div class="zxcv4"></div></div>
<div class="foo5"><div class="zxcv5"></div></div>
<div class="foo6"><div class="zxcv6"></div></div>

<script type="text/javascript">
        for (var i = 1; i < 6; i++) {
        $(".foo"+i).hover(
                function ()
                {
                    $(".zxcv"+i).fadeIn();
                }, function ()
                {
                    $(".zxcv"+i).fadeOut();
                });
        }
</script>
4

4 に答える 4

3

"で始まる属性" セレクターを使用できます。

$("div[class^='foo']").hover(function() {
    $(this).find("div[class^='zxcv']").fadeIn();
}, function() {
    $(this).find("div[class^='zxcv']").fadeOut();
});

ほとんどの jQuery メソッドはセット内のすべての要素に適用されるため、ループの必要がなくなります。

于 2012-04-21T13:15:07.187 に答える
2

コールバック内のループ変数を閉じています。これは常にそれらの内部iにある最終結果を持っています (これはまたはで確認できます)。i6console.logalert

この問題を解決するには、各コールバックが独自の の値を取得するようにする必要がありますi。Javascript 変数はブロックではなく関数全体にスコープされるため、これは、i毎回の現在の値で関数を呼び出す必要があることを意味します。

for (var i = 1; i < 6; i++) {
    (function(i) {
        $(".foo"+i).hover(
                function ()
                {
                    $(".zxcv"+i).fadeIn();
                }, function ()
                {
                    $(".zxcv"+i).fadeOut();
                });
    })(i);
}

いくつかのメモ:

  • ループ条件はi < 6代わりにi <= 6-- これはバグですか?
  • 他の人がすでに言ったように、この特定のケースでは、別のセレクターを使用することで閉鎖の問題を完全に回避できます。
于 2012-04-21T13:14:32.913 に答える
1

すべてを選択できます(こちら$("[class^='foo']")も参照):

$("[class^='foo']").hover(
    function () {
        $(this).find("[class^='zxcv']").fadeIn();
    }, function () {
        $(this).find("[class^='zxcv']").fadeOut();
    }
);

私の例も参照してください。

于 2012-04-21T13:15:31.827 に答える