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

Question

我与“myanchor”类有几个链接。 我想为每个链接显示一个 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();
            });
        });
    });

谢谢。

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();
});

这是working example。这消除了对each 循环的需要，因为jQuery 方法倾向于应用于匹配集中的所有元素（在这种情况下，这就是所有.myanchor 元素）。使用hover 只是比分别绑定mouseover 和mouseout 短一点，但最终结果是一样的。

Answer 2

这应该有效：

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