использование jquery для отображения/скрытия при наведении

У меня есть несколько ссылок с классом "мянчор". Я хочу отображать div для каждой ссылки (onmouseover) и скрывать (onmouseout):

"link1" отображает "div1" "link2" отображает "div2" . . .

Мой код, который не работает:

$(document).ready(function () {
        var n = $(".myanchor").length;
        var arr = [];
        for (var i = 1; i <= n; i++) {
            arr[i] = i;
        };

        jQuery.each(arr, function () {
            $("#anchor" + this, "#div" + this).mouseover(function () {
                $("#div" + this).show();
            }).mouseout(function () {
                $("#div" + this).hide();
            });
        });
    });

Спасибо.


jquery each onmouseover
person vobs    schedule 27.10.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Что-то вроде этого должно помочь. Я предполагаю, что имена ссылок хранятся в атрибуте id ссылок:

$(".myanchor").hover(function() {
    var id = $(this).attr("id");
    $("#div" + id.charAt(id.length - 1)).show();
}, function() {
    var id = $(this).attr("id");
    $("#div" + id.charAt(id.length - 1)).hide();
});

Вот рабочий пример. Это устраняет необходимость в цикле each, поскольку методы jQuery, как правило, применяются ко всем элементам в соответствующем наборе (в данном случае это все элементы .myanchor). Использование hover немного короче, чем привязка к mouseover и mouseout по отдельности, но конечный результат тот же.

person James Allardice    schedule 27.10.2011
comment
Спасибо, это чистый код, но я также хочу, чтобы при наведении курсора на div он оставался видимым, а когда я наводил курсор на div, он скрывался. - person vobs; 27.10.2011

arrow_upward
0
arrow_downward

это должно работать:

$(document).ready(function () {
            $(".myanchor").each(function(i){
              $(this).mouseover(function () {
                    $("#div" + i).show();
                }).mouseout(function () {
                    $("#div" + i).hide();
                });
            });
        });
person Kamil Lach    schedule 27.10.2011