Цикл навигации по меню с помощью jQuery - PullRequest
Новая
       15

Цикл навигации по меню с помощью jQuery

0 голосов
/ 02 октября 2011

относительные (?) Ссылки:

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 представляет собой прямоугольник, который будет выбирать элемент меню при наведении на него мыши

длинный код будет выглядеть как 

$("#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++;
}

спасибо за помощь

1 Ответ

0 голосов
/ 02 октября 2011

Прежде всего, вам будет лучше использовать hover, а не mouseover / mouseout.

Во-вторых, вам вообще не нужно использовать each, между вашими элементами .menuItem и .selectA есть хорошая простая взаимосвязь: они имеют одинаковый номер суффикса в атрибутах id.Таким образом, вы можете сделать все с помощью чего-то простого: 

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