Javascript 获取未捕获类型错误：无法读取属性'；左'；js中null的定义

我有一个jquery代码，它穿过导航栏，选中的链接周围有一个框。它只在中间环节起作用，其他环节都不起作用。有什么想法吗？提前谢谢

navigation arrow starts
var $el, leftPos, newWidth,
    $mainNav = $("#nav");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

//scroll arrow

function update_location(){
    $el = $('#nav').children('li.current');
    leftPos = $el.position().left;
    newWidth = $el.width();
    $('#nav li:nth-child(4) a').addClass('button-style');
    if(window.top.scrollY == 0)
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: 8,
            width: 355
        });},1000);
        $('#nav li:nth-child(4) a').removeClass('button-style');

    }
    else
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });},1000);
    }
}

$('#magic-line').css('left', '-15px', 'width','411px');
$(window).scroll(function(){
    update_location();
});

    <div class="navbar-fixed-top navbar" >
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav nav-pills pull-right" id="nav">
                <li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li>
                <li><a href="#vision">VISION</a></li>
                <li><a href="#services">SCHOOLS</a></li>
                <li><a href="#apply">REQUEST AN EVALUATION</a></li>
                <li><a href="#how-it-works">HOW IT WORKS</a></li>
                <li><a href="#contact-us">CONTACT US</a></li>
            </ul>
        </div>
    </div>
</div>

导航箭头开始
var$el、leftPos、newWidth、，
$mainNav=$（“#nav”）；
$mainNav.append（“
”；
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
//滚动箭头
函数更新_位置（）{
$el=$（“#nav”）.children（'li.current'）；
leftPos=$el.position（）.left；
newWidth=$el.width（）；
$（'#nav li:nth child（4）a'）.addClass（'button-style'）；
if（window.top.scrollY==0）
{
setTimeout（函数（）{
$magicLine.stop（）.animate({
左:8,，
宽度：355
});},1000);
$（'#nav li:nth child（4）a'）。removeClass（'按钮样式'）；
}
其他的
{
setTimeout（函数（）{
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});},1000);
}
}
$（'幻线'）.css（'左'，'-15px'，'宽'，'411px'）；
$（窗口）。滚动（函数（）{
更新_位置（）；
});

---

在

leftPos=$el.position（）.left之后获取错误

在

函数update\u location（）

下，我想您可能想在此行中使用class current\u page\u项，而不是current：

$el = $('#nav').children('li.current');

$el是空的jQuery对象，因此el.position（）为null，因此无法读取null左边的属性。

这是因为：

$el = $('#nav').children('li.current'); 

返回null

尝试：

---

问题是，

$el=$（'#nav'）.children（'li.current'）包含零个元素。因此，
.position（）
为
null
，并且会观察到您的错误。另一个注意事项：听说过变量声明吗？当省略所有
var
前缀时，变量在全局范围内定义。我知道它是空的，但为什么它是空的？因为这是在中定义的行为：
如果（！this[0]）{return null；}
-当没有元素时，返回
null
。我用当前的页面项目替换了current，但仍然没有更改。但错误已经消失了。当它循环通过时，它似乎只将“按钮样式”分配给中间链接，而从不将其取下并分配给另一个链接。
$el = $('#nav').children('li.current_page_item');