2

我一直在为我的导航制作一点动画效果。但是，我遇到了 chrome 控制台向我抛出的关于第 5 行的“Uncaught TypeError: Cannot read property 'left' of undefined”的问题：

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

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

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

任何见解都会令人惊叹

编辑：修复在下面的评论中..只是一个简单的文档。准备好两只眼睛总是比一只眼睛好！

4

2 回答 2

2

尝试在document.ready函数中扭曲您的代码，您的小提琴可以工作，因为默认情况下 jsfiddle 将您的代码包装在onLoad处理程序中（但您可以更改它）。

这是通过设置相同的问题：http No wrap <in head>: //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
        });
    });
});
于 2013-10-23T15:01:18.013 回答
1

jsfiddle 具有将代码包装在window.load处理程序中的（可能令人困惑的）默认设置。我猜测您正在尝试访问nav或.current_page_item在它们存在之前访问。尝试将代码包装在 dom 就绪处理程序中：

$(document).ready(function() {
    //your code here
});
于 2013-10-23T14:59:41.540 回答