Question

我正在使用JavaScript动态生成HTML表。其中一个表的列包含onmouseover事件，当鼠标光标位于特定单元格上时，我希望显示特定于单元格的信息。

在我的情况下，我希望通过nPos调用显示alert()的值，就像在表格构建期间一样。

创建表格的简化示例：

for (var iLoop = 0 ; iLoop < nHitsPerPage ; iLoop++) {
    var nPos = (nCurrentPageParam * SearchResults.nMaximumHitsPage) + iLoop;

    //...

    var cellInfo = tableResultsRow.insertCell(6);

    //...

    cellInfo.className = "noWrapCell";
    cellInfo.innerHTML = "?";
    cellInfo.style.cursor = "pointer";

    // The line below is important - I need to store nPos value during the table consturction
    cellInfo.onmouseover = function(){alert("nPos = " + nPos)};
    cellInfo.onmousemove = function(){FileResort.LightboxShortInfo.update(event)};
    cellInfo.onmouseout = function(){FileResort.LightboxShortInfo.hide(event)};
}

从上面的示例中可以看出，我在for()循环中迭代地创建了一个表。我想在每行（记录）中存储nPos的值，每行（记录）都不同。

我的问题是，一旦我将鼠标悬停在该特定单元格上，我就会为每一行（记录）获得相同的nPos值，并且nPos是nPos的当前值特定的申请状态。

我无法找到记录nPos执行期间for()值的方法，这对于识别特定行中存储的记录非常重要。

有没有办法在表格初始构建期间为每一行（记录）捕获或存储nPos的值？

Answer 1

你是封闭怪物的另一个受害者：）

看看这个：

cellInfo.onmouseover = function(){alert("nPos = " + nPos)};

此处的函数 - 我们称之为lambda - 必须找到变量nPos的值。由于nPos未在lambda内声明，因此它会在上层函数中查找它，即创建nPos的函数。

当mouseover事件触发时，声明和设置nPos的代码已经运行完成，因此nPos将具有值nHitsPerPage。

这正是lambda将显示的内容。不幸的是，这不是你想要的:)。

为了解决这个问题，你需要创建一个（词汇）闭包，即提供lambda值nPos，以满足你的需要。

在Javascript中执行此操作的方式如下：

cellInfo.onmouseover = function(p){
    return function () { alert("nPos = " + p)};
    } (nPos);

让我们调用nu新函数（以p作为参数的函数）。我们更改了lambda，现在它引用了p而不是nPos。

这意味着当mouseover事件触发时，lambda会在其上层函数中查找p，现在为nu。它确实会找到p，作为nu的参数。

p是一个函数参数，因此它在调用时会收到nPos 的副本 。这意味着lambda将为nu的每个实例引用cellInfo的调用上下文的不同实例。

鼠标悬停事件处理程序的每个实例现在都会保留p的副本，该副本设置为所需的nPos值。

Answer 2

Quick Psuedo代码：

var nPosArray = [];
var itemsArray = [];

for (var iLoop = 0 ; iLoop < nHitsPerPage ; iLoop++)
{
    var nPos = (nCurrentPageParam * SearchResults.nMaximumHitsPage) + iLoop;

    //...

    var cellInfo = tableResultsRow.insertCell(6);

    //...

    cellInfo.className = "noWrapCell";
    cellInfo.innerHTML = "?";
    cellInfo.style.cursor = "pointer";

    // The line below is important - I need to store nPos value during the table consturction
    nPosArray.push(nPos);
    cellInfo.addEventListener('mouseout', cellMouseOut(event));

    cellInfo.onmousemove = function(){FileResort.LightboxShortInfo.update(event)};
    cellInfo.onmouseout = function(){FileResort.LightboxShortInfo.hide(event)};
    itemsArray.push(cellInfo);
}

function cellMouseOut(e)
{
    for(iLoop = 0 ; iLoop < cellInfo.length; iLoop++)
    {
        if(e.target.id == cellInfo[iLoop].id)
        {
            alert('NPos: ' + nPosArray[iLoop]);
        }
    }
}

OnMouseOver事件和存储变量值

2 个答案: