0

相対(?) リンク:

http://api.jquery.com/each/

http://api.jquery.com/jQuery.each/

こんにちは

私はこのナビゲーションメニューを手に入れました

        <table>
        <tr>
        <td><div id="menuItem1" class="menuItem"><a href="http://www.w3schools.com">PORTFOLIO</a></div></td>
        <td><div id="menuItem2" class="menuItem">ABOUT ME</div></td>
        <td><div id="menuItem3" class="menuItem">CONTACT</div></td>
        </tr>
        <tr>
        <td><div id="selectA1" class="selectA current"></div></td>
        <td><div id="selectA2" class="selectA"></div></td>
        <td><div id="selectA3" class="selectA"></div></td>
        </tr>
        </table>

selectA クラスは、マウスが上に移動したときに menuItem を選択する長方形です。

長いコードは次のようになります

$("#menuItem1").mouseover(function () {
    $("#selectA1").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem2").mouseover(function () {
    $("#selectA2").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem3").mouseover(function () {
    $("#selectA3").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem1").mouseout(function () {
    $("#selectA1").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

$("#menuItem2").mouseout(function () {
    $("#selectA2").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

$("#menuItem3").mouseout(function () {
    $("#selectA3").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

しかし、それらをループすればもっと短くできると思いました

だから私はそれらのメニュー項目をループして、すべてのメニュー項目に長方形が表示されるようにしようとしました

私がjavascriptで試したことは、すべてうまくいきませんでした

var i=1;
for (i=1;i<=3;i++) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});
}

と

var i=1;
while (i<=3) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

と

$(".selectA").each(function (i) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});
}


i++;
}

ご協力ありがとうございました

4

1 に答える 1

0

まず第一に、 /のペアhoverよりも使用したほうがよいでしょう。mouseovermouseout

次に、まったく使用する必要はありません。要素と要素eachの間には単純な関係があります。属性には同じ接尾辞番号があります。したがって、次のような単純なものですべてを実行できます。.menuItem.selectAid

$('.menuItem').hover(
    function() {
        var n = this.id.replace(/[^\d]/g, '');
        $('#selectA' + n).stop().animate({ opacity: 1 },{ queue: false, duration: 200 });
    },
    function() {
        var n = this.id.replace(/[^\d]/g, '');
        $('#selectA' + n).stop().animate({ opacity: 0 },{ queue: false, duration: 200 });
    }
);

デモ: http://jsfiddle.net/ambiguous/eza8b/

この理由については、次のとおりです。

for(var i = 1; i <= 3; i++) {
    $("#menuItem" + i).mouseover(function () {
        $("#selectA" + i).stop().animate({opacity: 1}, {queue: false, duration: 200 });
    });
}

うまくいきません、あなたは古典的な閉鎖の問題を抱えています。あなたが提供する関数.mouseoverはクロージャーでiあるため、それらのすべてが最後にi持っていた値を使用することになり、その値は 4 です。これは、すべての内部セレクターが最終的に で$('selectA4')あり、有用なものを参照していないことを意味します。本当にループを使用したい場合は、次のようiにして、必要なときに強制的に評価することができます。

for(var i = 1; i <= 3; i++)
    (function(n) {
        $("#menuItem" + n).mouseover(function () {
            $("#selectA" + n).stop().animate({opacity: 1}, {queue: false, duration: 200 });
        });
    })(i);

またはこれ：

function build_animator(i) {
    return function() {
        $('#selectA' + i).stop().animate({opacity: 1}, {queue: false, duration: 200 });
    };
}
for(var i = 1; i <= 3; i++)
    $("#menuItem" + i).mouseover(build_animator(i));
于 2011-10-01T23:15:16.480 に答える