Question

当我在div中使用div类时有一个div列表。

<div class="list-group games">
   <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div class="active">item</div>
    <div>item</div>
    <div>item</div>
</div>

这是一个包含700个项目的非常长的列表，我想通过向下翻页/向上按钮轻松导航，并使用箭头键向上/向下移动1个项目。

它们用于移动单个项目的功能正常。 pgdown / up功能在按下时间间隔稍有暂停时也可以正常工作。当我按住pgdown / up按钮时，在执行该功能约10次后，它开始给我以下错误。

我使用的功能

function pgDown(e){
                e.preventDefault();
                var currentItem = $(".active");
                var itemCount = $(".games").children().length;
                nextItem = currentItem.prevAll().size() - 10;
                if (nextItem < itemCount){
                    currentItem.removeClass('active');
                    currentItem = $(".games div:nth-child("+ nextItem +")").addClass('active');
                    animatedScrollTo(
                        document.body,
                        ($(".active").offset().top) - ($(window).height()/2), 
                        0
                    );
                }
            }

错误：

Uncaught TypeError: Cannot read property 'top' of undefined

它来自函数

中的这行代码

($(".active").offset().top) - ($(window).height()/2),

有谁知道如何防止这种情况发生？

如果有另一种方法可以实现这一目标，那么我很乐意实现它。

Answer 1

似乎在某些时候没有“活动”类的元素或它被隐藏。你应该调查一下。但是，这应该可以防止错误发生：

var activeOffset = $(".active").offset();

if(activeOffset) {
    animatedScrollTo(
      document.body,
      (activeOffset.top) - ($(window).height()/2), 
      0
   ); 
}

Jquery / JS：从兄弟姐妹中跳过N个项目。 holdng键后出错

1 个答案: