无法使用 jQuery 访问关联数组中的对象答案

【问题标题】：Cannot access objects in associative arrays using jQuery无法使用 jQuery 访问关联数组中的对象
【发布时间】：2010-05-28 11:18:13
【问题描述】：

我正在尝试创建对象数组，以便我可以在 jQuery 中的 for 循环中访问它们，并且我知道这在 Actionscript 中有效，所以我想要做的是将我当前的知识转换为可以工作的 jQuery。

请看看这个并告诉我为什么我无法访问 divToShow

谢谢大家

var homeImages = new Array();
homeImages[0] = { hoverImage: ".leftColImage1", divToShow: ".image1", rollOverImg: "img-family-over.jpg" };
homeImages[1] = { hoverImage: ".leftColImage2", divToShow: ".image2", rollOverImg: "img-students-over.jpg" };
homeImages[2] = { hoverImage: ".leftColImage3", divToShow: ".image3", rollOverImg: "img-pros-over.jpg" };
homeImages[3] = { hoverImage: ".leftColImage4", divToShow: ".image4", rollOverImg: "img-retired-over.jpg" };

var hoverImage;
var activeDiv;
var mainContent = ".mainContent";

for (k = 0; k < homeImages.length; k++) {

    homeImages[k].id = k;
    $(homeImages[k].hoverImage).mouseover(function() {
    //alert("divToShow : " + homeImages[this.id].divToShow);
        alert("this : " + this.id);
        activeDiv = homeImages[k].divToShow;
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + homeImages[k].rollOverImg);
        $(mainContent).hide();
        $(homeImages[k].divToShow).slideDown("slow");
    }).mouseout(function() {
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg");
        $(".image1").hide();
        $(mainContent).slideDown("slow");
    });
}

【问题讨论】：

homeImages[k].id = k的目的是什么？
在 Actionscript 中，您可以将该 id 附加到数组中，然后在函数内部，您可以调用“this.id”来引用该数组中的任何内容。这是一个范围问题，我不知道它在 Javascript 中是否相同。谢谢
啊，我怀疑你这里的闭包有问题。你总是得到“.image4”吗？
是的，当数组中只有两个 ID 时，我只获得了第二个 ID，所以这很可能是问题所在。有建议吗？
是的，你必须在变量上创建一个闭包。请参阅我的新答案。

标签： javascript jquery closures

【解决方案1】：

好的，试试这个：

for (k = 0; k < homeImages.length; k++) {
    (function(current) {
        $(current.hoverImage).hover(function() {
            activeDiv = current.divToShow;
            $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + current.rollOverImg);
            $(mainContent).hide();
            $(current.divToShow).slideDown("slow");
        },
        function() {
            $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg");
            $(".image1").hide();
            $(mainContent).slideDown("slow");
        });
    })(homeImages[k]);
}

或者：

function setUpHover(item) {
    $(item.hoverImage).hover(function() {
        activeDiv = item.divToShow;
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + current.rollOverImg);
        $(mainContent).hide();
        $(item.divToShow).slideDown("slow");
    },
    function() {
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg");
        $(".image1").hide();
        $(mainContent).slideDown("slow");
    });
}

for (k = 0; k < homeImages.length; k++) {
    setUpHover(homeImages[k]);
}

【讨论】：

太棒了，成功了！谢谢埃里克。对 jQuery 来说还是新手，所以它让我有些吃惊。 :)
我认为您将 jQuery 与 Javascript 混淆了。 jQuery 只是 javascript 的一个函数库：闭包是 javascript 的一个特性，而不是 jQuery。
你呢？对不起，但我更新答案时没有注意到。前半部分肯定是在任何其他答案之前发布的。如果后半部分与您的相似，我很抱歉，但老实说，我完全是从我的第一个解决方案中得出的。

【解决方案2】：

//alert("divToShow : " + homeImages[this.id].divToShow);

在这种情况下，this 指的是当前的 HTML 元素，不是当前的 homeImages 元素。

【讨论】：

【解决方案3】：

您正在从鼠标悬停处理函数内部访问变量k。但是在调用该函数时，k 的值已经改变，现在等于 homeImages.length，因为 for 循环已经运行完成。

解决此问题的一种方法是使用$.each 而不是 for 循环：

$.each(homeImages, function(k, element) {
    element.id = k;
    $(element.hoverImage).mouseOver(function() {
        .... //you can use the value of k or element here
    });
});

这会起作用，因为传递给 $.each 的函数会创建一个新的闭包，该闭包会记住每次迭代的 k 的值。

【讨论】：

【解决方案4】：

原因是与闭包有关的旧经典：在鼠标悬停处理程序中，k 始终设置为其最后一个值 4，而不是创建鼠标悬停处理程序时的值，这是您的代码所期望的。

您可以通过在函数中创建鼠标悬停处理程序来解决此问题：

function addMouseEventHandlers(imageIndex) {
    var homeImage = homeImages[imageIndex];
    homeImage.id = imageIndex;
    $(homeImage.hoverImage).mouseover(function() {
    //alert("divToShow : " + homeImages[this.id].divToShow);
        alert("this : " + this.id);
        activeDiv = homeImage.divToShow;
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + homeImage.rollOverImg);
        $(mainContent).hide();
        $(homeImage.divToShow).slideDown("slow");
    }).mouseout(function() {
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg");
        $(".image1").hide();
        $(mainContent).slideDown("slow");
    });
}

for (k = 0; k < homeImages.length; k++) {
    addMouseEventHandlers(k);
}

【讨论】：