使用jquery每个在悬停时显示/隐藏

Question

我和班级"myanchor"有几个链接.我想为每个链接显示一个div(onmouseover)和hide(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();
            });
        });
    });

谢谢.

Answer 1

这样的事情应该可以解决问题.我假设链接名称存储在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分开一点点,但最终结果是相同的.