[英]Cannot access objects in associative arrays using jQuery
I am trying to create and array of objects so that I can access them in a for loop in jQuery and I know that this works in Actionscript so what I am trying to do is convert my current knowledge to jQuery that will work. 我正在尝试创建和排列对象,以便可以在jQuery中的for循环中访问它们,而且我知道这在Actionscript中有效,所以我想做的就是将当前的知识转换为可以使用的jQuery。
Please have a look at this and tell me why I cannot access divToShow 请看看这个,并告诉我为什么我无法访问divToShow
Thanks guys 多谢你们
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");
});
}
//alert("divToShow : " + homeImages[this.id].divToShow);
在这种情况下, this
是指当前的HTML元素, 而不是当前的homeImages元素。
The reason is the old classic relating to closures: in the mouseover handler, k
is always set to its last value of 4 rather than its value when the mouseover handler was created, which is what your code is expecting. 原因是与闭包有关的古老经典:在mouseover处理程序中,
k
始终设置为最后一个值4,而不是在创建mouseover处理程序时将其值设置为4,这就是您的代码所期望的。
You can fix this by creating the mouseover handler in a function: 您可以通过在函数中创建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);
}
You are accessing the variable k
from inside the mouseover handler function. 您正在从mouseover处理函数内部访问变量
k
。 But by the time that function is called, the value of k
has already changed and is now equal to homeImages.length
since the for
loop has already run to completion. 但是到调用该函数时,
k
的值已经更改,并且现在等于homeImages.length
因为for
循环已经运行完毕。
One way to solve this is to use $.each
instead of the for loop: 解决此问题的一种方法是使用
$.each
代替for循环:
$.each(homeImages, function(k, element) {
element.id = k;
$(element.hoverImage).mouseOver(function() {
.... //you can use the value of k or element here
});
});
This will work because the function passed to $.each
creates a new closure which remembers the value of k
for each iteration. 这将起作用,因为传递给
$.each
的函数会创建一个新的闭包,该闭包将记住每次迭代的k
值。
Ok, try this: 好的,试试这个:
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]);
}
Or alternatively: 或者:
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]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.