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

我正在尝试创建和对象数组，以便我可以在jQuery的for循环中访问它们，并且我知道这在Actionscript中有效，所以我试图做的是将我的目前的知识jQuery将工作。无法使用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"); 
    }); 
}

来源

2010-05-28 Sixfoot Studio

什么'homeImages [K] .ID = k'的目的是什么？ – Eric 2010-05-28 11:27:42

在Actionscript中，您可以将该ID添加到数组中，然后在函数内部可以调用“this.id”来引用该数组中的任何内容。这是一个范围问题，我不知道它是否是在Javascript中的相同的东西。谢谢 – 2010-05-28 11:30:56

啊，我怀疑你在这里遇到了关闭问题。你总是得到“.image4”吗？ – Eric 2010-05-28 11:31:00

好吧，试试这个：

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

来源

2010-05-28 11:34:20 Eric

真棒，工作！谢谢埃里克。对于jQuery来说还是一个新东西，所以它让我有些惊讶。 :) – 2010-05-28 11:49:44

我认为你使用Javascript来混淆jQuery。 jQuery只是一个javascript的函数库：闭包是javascript的一个特性，而不是jQuery。 – Eric 2010-05-28 12:19:37

您是否？对不起，我更新答案时没有注意到。上半场肯定是在任何其他答案之前发布的。如果下半场与你的类似，我很抱歉，但我真诚地从我的第一个解决方案中得到它。 – Eric 2010-05-28 13:26:21

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

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

来源

2010-05-28 11:29:33 Eric

原因是有关闭包的老经典：在mouseover处理程序中，k始终设置为它的最后一个值为4，而不是在创建mouseover处理程序时的值，这正是您的代码所期望的值。

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

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

来源

2010-05-28 11:31:37

您从鼠标悬停处理函数内访问变量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每个迭代的值。

来源

2010-05-28 11:33:15 interjay

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

回答

相关问题