Javascript 无法使用jQuery访问关联数组中的对象
我正在尝试创建和排列对象,以便在jQuery中以for循环访问它们,我知道这在Actionscript中是可行的,所以我正在尝试将我当前的知识转换为jQuery 请看一下这个,告诉我为什么我不能访问divToShow 谢谢各位Javascript 无法使用jQuery访问关联数组中的对象,javascript,jquery,closures,Javascript,Jquery,Closures,我正在尝试创建和排列对象,以便在jQuery中以for循环访问它们,我知道这在Actionscript中是可行的,所以我正在尝试将我当前的知识转换为jQuery 请看一下这个,告诉我为什么我不能访问divToShow 谢谢各位 var homeImages = new Array(); homeImages[0] = { hoverImage: ".leftColImage1", divToShow: ".image1", rollOverImg: "img-family-over.jpg" }
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");
});
}
在该上下文中,这指的是当前HTML元素,而不是当前homeImages元素。原因是与闭包相关的古老经典:在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);
}
您正在从mouseover处理程序函数内部访问变量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
});
});
这将起作用,因为传递给$的函数将创建一个新的闭包,该闭包将记住每次迭代的k值。好的,尝试以下操作:
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]);
}
homeImages[k].id=k的用途是什么?在Actionscript中,您可以将该id附加到数组中,然后在函数内部调用this.id来引用该数组中的任何内容。这是一个范围问题,我不知道它在Javascript中是否是相同的。谢谢,我怀疑你这里的闭包有问题。你总是得到.image4吗?是的,当我在数组中只有两个ID时,我只得到了第二个ID,所以这可能就是问题所在。有什么建议吗?是的,你必须在变量上创建一个闭包。看看我的新答案。太棒了,成功了!谢谢你,埃里克。对于jQuery来说仍然是新的,所以它让我有些困惑我认为你把jQuery和Javascript搞混了。jQuery只是javascript的一个函数库:闭包是javascript的一个特性,而不是jQuery。你知道吗?对不起,我更新答案时没有注意到。上半场肯定是在其他答案之前发布的。很抱歉,如果下半部分与你的类似,但我诚实地从我的第一个解决方案中得出它。
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]);
}