jQuery Uncaught TypeError with offset().left

jQuery Uncaught TypeError with offset().left

本文关键字：left offset with Uncaught TypeError jQuery      更新时间：2023-09-26

无论如何，我的代码在视觉上工作正常，但我在我的控制台中不断收到"未捕获的类型错误：无法读取未定义的属性'左'"。 我不知道是什么原因造成的。

具体来说，错误显示在以下位置：行： 

var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**

上下文的整个函数：

 $('.hoverBar li').hover(function(){
        var left = $(this).offset().left - ($(this).parents('.hoverBar').offset().left + 20);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-ms-transform" : sictranslate,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "transform": sictranslate
        });
    },
    function(){
        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**
        var width = $(this).siblings('li.active').width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-ms-transform" : sictranslate,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "transform": sictranslate
        });
    }).click(function(){
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        return false;
    });

和一些相关的 HTML：

<nav class="head_nav">
<div class="hoverBar">
<ul id="navbar">
            <li class="active"><a href="">About</a>
    <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Board Members</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Task Forces</a></li>
            </ul>
    </li>
<li><a href="">Events</a>
    <ul>
        <li><a href="#">Description</a></li>
        <li><a href="#">Registration with Outlook ICS</a></li>
        <li><a href="#">Online Payment</a></li>
        <li><a href="#">Email auto-reminders</a></li>
        <li><a href="#">Multiple registrants allowed</a></li>
            </ul>
    </li>
</ul>
<div class="floatr"></div>
</div>
</nav>

我把你的代码复制到jsFiddle：http://jsfiddle.net/mswieboda/F4fnf/和第 16 行，您需要添加如下.parents('.hoverBar').find('li.active')：

var left = $(this).parents('.hoverBar').find('li.active').offset().left - 
    ($(this).parents('.hoverBar').offset().left + 20);

这是因为悬停元素$(this)：.hoverBar > ul > li > ul > li > a不是您尝试在 DOM 中导航到.hoverBar > ul > li.active的同级。

这修复了您在尝试undefined上.offset()时收到的 JS 错误，因为该 jQuery 元素不存在。

这是当选择器没有元素时，偏移量返回undefined 。只需将您的代码包装到

var $siblings = $(this).siblings('li.active');
if ($siblings.length) {
    var left = $siblings.offset().left 
             - ($(this).parents('.hoverBar').offset().left + 20);
    var width = $siblings.width() + "px";
    //...
}

这样，您的选择器就会缓存到变量$siblings中，并且不会运行两次或更多次。

相关文章：