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

Question

在代码的顶部，我声明了 table 个对象。然后，在函数 setup() 中，我试图在 table 中为每个对象添加 onmouseover 函数并将每个对象作为函数 pickUp(pick) 的参数传递，但随后我将鼠标悬停在这个对象上，控制台说 "pick is undefined"。这对我来说很奇怪，因为例如我传递了 pickUps[0] 而 typeof(pickUps[0]) 给了我 "object"。有人可以解释并帮助将每个对象作为参数传递吗？

代码：

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

问题是 setup 函数循环中的变量 i 是内部匿名函数定义的 closure 的一部分。因此，在 pickUps[i] 被使用的那一刻，循环早已结束，i 的值为 pickUps.length，所以 pickUps[i] 的值是 undefined （它指向一个刚好超出数组边界的值）。

一种修复方法是使用 returns 一个函数，并将 i 或 pickUps[i] 作为参数传递给它：

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

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

Answer 2

首先，您必须检查您的情况下的 rgb、rgba 和 hex，因为计算的背景颜色可以存储为 rgb 或 rgba，或者在不同的浏览器中为 hex（我也将其转换为 rgb 和 rgba，例如，您可以通过此在线转换器进行转换：http://hex2rgba.devoth.com/） .如果你想获得元素的计算样式，你应该这样做：window.getComputedStyle(element).getPropertyValue(property) 而不是 pick.style.background。并且在提供的代码中，pickUp(pickUps[i]); 没有传递给元素的函数，并且发生了错误：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

所以我用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);
}

<div class="pickUpSquare">1</div>
<div class="pickUpSquare">2</div>
<div class="pickUpSquare">3</div>

Answer 3

问题出在你的循环上。 "i" 的最后一个值是传入的值。在这种情况下，"i" 比拾音器数组的长度多 1，因此它始终未定义。

您必须重组您的循环，使其不依赖于 i，而且不产生只是 i 的副本的 var。这似乎有效：

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

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

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

Can't pass argument to the function onmouseover - javascript

javascript

parameter-passing

onmouseover

mouseevent