无法指定位置偏移顶部

问题描述：

我有div元素“y”和一类名为“terrain”的图像。下面的代码旨在让每当类的元素被点击时，y和那个元素共享顶部和左边的位置。
但是，它似乎没有工作。解决办法是什么？无法指定位置偏移顶部

var lands = document.getElementsByClassName("terrain"); 
for(var i = 0; i < lands.length; i++){ 
    lands[i].onclick = function(){ 
     y.style.left = lands[i].offsetLeft; 
     y.style.top = lands[i].offsetTop; 
    }; 
}

答

你必须使用一个IIFE使得currentely迭代“地形”设置其属性（offsetLeft，的offsetTop）为y，它的点击时。

希望这有助于：

var lands = document.getElementsByClassName('terrain'); 
for (var i = 0; i < lands.length; i++) { 
    (function (land) { 
    land.onclick = function() { 
     alert('left: '+land.offsetLeft+' top: '+land.offsetTop); 
     y.style.left = land.offsetLeft + 'px'; 
     y.style.top = land.offsetTop + 'px'; 
    }; 
    }) (lands[i]); 
}

不幸的是，它似乎没有工作。 – someGuy

你看到一些警报吗？如果是，点击处理程序的作品，但我不能测试offsetLeft/offsetTop。 – Blauharley

我正在测试它 – someGuy

答

的for环搅乱关闭你有（点击处理程序中的varaible i将对所有lands相同的值时，点击其中的一个， i的值将是lands.length，这是一个未定义的值）。这是因为for的范围保持不变，直到最后。您需要为lands阵列的每个项目创建不同范围的内容。 forEach可以acheive，像这样：

var lands = document.getElementsByClassName("terrain"); 
Array.prototype.forEach.call(lands, function(land) { 
    land.onclick = function(){ 
     y.style.left = land.offsetLeft; 
     y.style.top = land.offsetTop; 
    }; 
});

由于lands（的getElementsByClassName结果）是一个阵列状物体但不是一个阵列，forEach没有被定义，所以我们必须这样称呼它：Array.prototype.forEach.call。阅读更多关于：forEach,closure和call。

无法指定位置偏移顶部

相关推荐