我被困在Javascript的事件处理程序方面。
rowCells [j]是对唯一对象的引用。 galleryCell也是对新创建对象的引用。按理说这两者可以联系在一起。
但是,似乎两个引用完全没有绑定在一起,以使事件侦听器正常工作。所有单元格都被分配给相同的东西(最后一个galleryCell对象)。
galleryCell变量位于for循环中,在每次迭代时获取一个新引用。为什么这些引用会丢失?
function TypeGallery (galleryObj)
{ //receives the <div> element that contains rows and cells of a gallery
//Properties --------------
var galleryCellArr = []; //array of galleryZoomCell objects
//Methods -----------------
var Initialize = function ()
{
var rows = galleryObj.children;
var rowCount = rows.length;
for (var i=0;i<rowCount;i++)
{
var rowCells = rows[i].children;
var rowCellCount = rowCells.length;
for (var j=0;j<rowCellCount;j++)
{
var sliderObj = new TypeSlider(300,1,false);
var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj)
galleryCellArr.push(galleryCell);
rowCells[j].onmousedown = function () {galleryCell.Deploy();};
rowCells[j].onmouseup = function () {galleryCell.Retract();};
}
}
}
//Initialization
Initialize();
}
答案 0 :(得分:2)
尝试将javascript闭包放在for循环中,如下所示:
function TypeGallery (galleryObj)
{ //receives the <div> element that contains rows and cells of a gallery
//Properties --------------
var galleryCellArr = []; //array of galleryZoomCell objects
//Methods -----------------
var Initialize = function ()
{
var rows = galleryObj.children;
var rowCount = rows.length;
for (var i=0;i<rowCount;i++)
{
var rowCells = rows[i].children;
var rowCellCount = rowCells.length;
for (var j=0;j<rowCellCount;j++)
{
(function(j) {
var sliderObj = new TypeSlider(300,1,false);
var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj)
galleryCellArr.push(galleryCell);
rowCells[j].onmousedown = function () {galleryCell.Deploy();};
rowCells[j].onmouseup = function () {galleryCell.Retract();};
})(j);
}
}
}
//Initialization
Initialize();
}
答案 1 :(得分:0)
好的,我现在了解Javascript和块范围限制的问题。
在此过程中我发现了第二个可能的解决方案:是否有任何异议或警告用'让'替换'var' for for循环?
就我所知,这段代码很好用。有任何隐患吗?
var Initialize = function ()
{
var rowsArr = galleryObj.children;
var rowCount = rowsArr.length;
for (let i=0;i<rowCount;i++)
{ //Javascript does not understand block-scope unless the let keyword
let rowCellsArr = rowsArr[i].children;
let rowCellCount = rowCellsArr.length;
for (let j=0;j<rowCellCount;j++)
{
//Attach (rowCellsArr[j]);
let sliderObj = new TypeSlider(300,1,false);
let galleryCell = new TypeGalleryZoomCell(rowCellsArr[j],sliderObj);
galleryCellArr.push(galleryCell);
galleryCellArr[galleryCellArr.length-1].cell.onmousedown = function () {galleryCell.Deploy();};
galleryCellArr[galleryCellArr.length-1].cell.onmouseup = function () {galleryCell.Retract();};
}
}
}