Question

在代码顶部我声明了对象表。然后，在函数setup（）中，我试图在表中预先对象，添加onmouseover函数并将每个对象作为函数pickUp（pick）的参数传递，但是然后我将鼠标悬停在这个对象上，控制台说＆＃34;选择未定义＆＃34;。这对我来说很奇怪，因为我通过了pickUps [0]，而typeof（pickUps [0]）给了我＆＃34; object＆＃34;。有人可以解释并帮助将每个对象作为参数传递吗？

代码：

var locked = "#4C8299";
var pickedUp = "#CC1B2B";
var released = "#19FFC8";

var pickUps = document.getElementsByClassName("pickUpSquare");

function pickUp(pick){
    if (pick.style.background == released){
        pick.style.background = pickedUp;
    }
}

function setup(){
    for (var i = 0; i < pickUps.length; i++){
        pickUps[i].onmouseover = function(){
            pickUp(pickUps[i]);
       }
    }   
}

window.onload = setup;

Answer 1

问题是i函数循环中的变量setup是内部匿名函数定义的闭包的一部分。因此，在pickUps[i]被使用的那一刻，循环已经完成，i的值为pickUps.length，所以pickUps[i]的值是undefined（它指向超出数组范围的值）。

修复的一种方法是使用返回函数的函数，并传递给i或pickUps[i]作为参数：

pickUps[i].onmouseover = (function(pick) {
    return function() { pickUp(pick); }
})(pickUps[i]);

如果您可以使用ES6，那么更简单的解决方案是将var i替换为let i循环中的for（感谢@alex-kudryashev）。

Answer 2

首先，您需要检查案例中的rgb，rgba和hex，因为计算出的背景颜色可以存储为rgb或{{1} }，或者作为rgba在不同的浏览器中（我已将其转换为hex和rgb，您可以通过此在线转换器执行此操作：http://hex2rgba.devoth.com/）。如果你想获得元素的计算样式，你应该这样做：rgba而不是window.getComputedStyle(element).getPropertyValue(property)。在提供的代码中，pick.style.background没有传递给元素的功能，并且发生了错误：

未捕获的TypeError：无法在'Window'上执行'getComputedStyle'：参数1不是'Element'类型

所以我用pickUp(pickUps[i]);关键字替换了它。

以下是工作片段：

this

var lockedRgb = "rgb(76, 130, 153)";
var lockedRgba = "rgba(76, 130, 153, 1)";
var lockedHex = "#4C8299";
var pickedUpRgb = "rgb(204, 27, 43)";
var pickedUpRgba = "rgba(204, 27, 43, 1)";
var pickedUpHex = "#CC1B2B";
var releasedRgb = "rgb(25, 255, 200)";
var releasedRgba = "rgba(25, 255, 200, 1)";
var releasedHex = "#19FFC8";

var pickUps = document.getElementsByClassName("pickUpSquare");

function pickUp(pick){
    var currentBgc = window.getComputedStyle(pick).getPropertyValue("background-color");
    if (currentBgc === releasedRgb || currentBgc === releasedRgba || currentBgc === releasedHex){
        pick.style.backgroundColor = pickedUpRgb;
    }
}

function setup(){
    for (var i = 0; i < pickUps.length; i++){
        pickUps[i].onmouseover = function(){
            pickUp(this);
       }
    }   
}

window.onload = setup;

.pickUpSquare {
  background-color: rgb(25,255,200);
}

Answer 3

问题是你的循环。＆＃34; i＆＃34;的最后一个值正在传递的是什么。在这种情况下，＆＃34;我＆＃34;比拾取器阵列的长度多一个，所以它总是未定义的。

你必须重新构建你的循环以不依赖于i，而且还不能生成仅仅是i的副本的var。这似乎有效：

for (let pu of pickUps){
    pu.onmouseover = function(){
        pickUp(pu);
   }
}

希望这会有所帮助，或者至少建议一个答案

无法将参数传递给函数onmouseover - javascript

3 个答案: