Javascript函数无法返回元素

Posted 2023-03-22

【中文标题】Javascript函数无法返回元素

【英文标题】：Javascript function fails to return element

【发布时间】：2012-07-19 03:35:39

【问题描述】：

所以我目前正在为一个项目使用Handsontable jQuery 插件，并且我已经编写了一些自定义函数来使用它。

我目前遇到问题的函数是我编写的用于返回当前选择的单元格的函数（当用户只选择了一个，而不是多个，并且是的，已检查）。

这是我的代码：

function getCurrentCell()
    var selection = $('div.current');
    var left = selection.offset().left;
    var right = left + selection.width();
    var top = selection.offset().top;
    var bottom = top + selection.height();
    $('div.active').find('table').find('td').each(function()
        if($(this).offset().left >= left && $(this).offset().left <= right && $(this).offset().top >= top && $(this).offset().top <= bottom)
            return this;
        
    );
    return false;

但是，每当我调用以下函数时：

var cell = getCurrentCell();

然后尝试alert(cell)或console.log(cell)，我得到一个false的返回值。

我最初的想法是坐标会以某种方式关闭，因此找不到符合条件的元素，所以我尝试通过添加来检查...

$(this).css('background-color', 'black');

...就在return this 行之前。这样，如果找到正确的表格单元格，它将在实际返回代码之前显示在屏幕上。有趣的是，正确的单元格 总是 的背景颜色会正确更改。所以，这个函数 找到了正确的单元格，它正在执行 if 循环中的代码，但是当我尝试将返回值捕获到一个变量中时，该变量始终为 false。

任何帮助都会很棒！谢谢！

【问题讨论】：

我了解您的问题与此功能有关，并且您找到了解决您的功能无法正常工作的原因，但我强烈建议您使用 @warpech 发布的解决方案。不仅因为 Handsontable 试图将逻辑和 DOM 分开，还因为如果屏幕上的行数超过几十行，这将中断。虚拟渲染将导致您选择的单元格不被渲染，这意味着即使您选择了一个单元格，您也无法使用 DOM 找到它。而是使用hotInstance.getSelected()。

【参考方案1】：

您正在将.each() 与函数一起使用

.each(function()
    ...
    return this;
);
return false;

这将从回调中返回（如果this 是false，则可能会停止每个循环），但永远不会从外部getCurrentCell 函数中中断并返回！所以，那个总是会返回false。

快速修复：

var result = false;
<...>.each(function()
    if (<condition>) 
        result = <found element>;
        return false; // break each-loop
    
);
return result; // still false if nothing found

【讨论】：

我刚刚遇到了同样的问题.. 撞了我的头 2 个小时：P

【参考方案2】：

目前有一种更好的方法可以让当前在 Handsontable 中被选中。只需使用 Handsontable 中的以下方法：

handsontable('getSelected') - 返回当前选中单元格的索引 作为一个数组 [topLeftRow, topLeftCol, bottomRightRow, bottomRightCol]

handsontable('getCell', row, col) - 给定row,col的返回元素

这里描述了所有方法：https://github.com/warpech/jquery-handsontable

【讨论】：

这绝对是要走的路。在给定 DOM 状态的情况下尝试猜测选定的单元格不是好的做法，因此在尝试查找选定的单元格时应使用此解决方案。