Question

我刚刚为我的导航做了一点动画效果。但是我遇到了一个问题，“未捕获的TypeError：无法读取未定义的属性'左侧”，Chrome控制台向我投掷第5行：

var left = $('nav').find('.current_page_item').position().left;

如果我手动将选择器输入控制台，那么我会得到预期的0返回字符串，但它只是不想玩球。

然后我把它带到jsfiddle玩它...它在那里工作没有问题！在这里找到：http://jsfiddle.net/5wPQa/594/

任何见解都会令人惊讶

编辑：修复在下面的评论..只是一个简单的文件.ready 两只眼睛总是比那只眼睛好！

Answer 1

尝试在document.ready函数中使用你的代码，你的小提琴是有效的，因为默认情况下，jsfiddle将你的代码包装在onLoad处理程序中（但你可以改变它）。

设置No wrap <in head>：http://jsfiddle.net/G8Jtw/

是同样的问题

如果你将代码包装在document.ready中，它可以正常工作：http://jsfiddle.net/8QeVd/

最终代码：

$(document).ready(function () {
    // insert slider
    $('nav ul').append('<div id="slider"></div>');

    // initially reset
    var left = $('nav').find('.current_page_item').position().left;
    var width = $('nav ul li:first-child a').width();
    $('#slider').css({
        'left': left,
        'width': width
    });

    // sliding
    $('nav ul li a').hover(function () {

        var left = $(this).parent().position().left;
        var width = $(this).width();

        $('#slider').stop().animate({
            'left': left,
                'width': width
        });
    });
});

Answer 2

jsfiddle有一个（可能令人困惑的）默认情况下将代码包装在window.load处理程序中。我猜你试图在它们存在之前访问nav或.current_page_item。尝试将代码包装在dom ready处理程序中：

$(document).ready(function() {
    //your code here
});

未捕获的TypeError：无法读取未定义的属性“left”（但在jsfiddle中工作？）

2 个答案: