无法读取未定义的属性“左侧”答案

【问题标题】：Cannot read property 'left' of undefined无法读取未定义的属性“左侧”
【发布时间】：2013-03-10 19:51:00
【问题描述】：

试图弄清楚为什么 chrome 会抛出错误

"Uncaught TypeError: Cannot read property 'left' of undefined"

虽然#explorenav 效果很好，但#experiencenav 似乎不起作用。我错过了什么吗？

JS代码：

$('.nav li#explorenav a').click(function(){
    $('body').animate({scrollLeft: $("#explore").offset().left-15}, 1000, function(){
        $(this).parent().addClass('active');
    });

    return false;
});

$('.nav li#experiencenav a').click(function(){
    $('body').animate({scrollLeft: $("#experience").offset().left-15}, 1200, function(){
        $(this).parent().addClass('active');
    });

    return false;
});

HTML 代码：

<div id="explore">
    <div class="Features">
        <div class="Feature1" title="The Active Park Assist feature can find parking spaces for you and help manoeuvre your car into them, as if by magic.">
            &nbsp;
        </div>
        <div class="Feature2" title="The luxurious and athletic Interior has sports front seats with red stitching and belts, making you wish the journey never ended">
            &nbsp;
        </div>
        <div class="Feature3" title="With Collision Prevention Assist and Attention Assist you can rest assured that you’ll get to wherever you’re going, safely.">
            &nbsp;
        </div>
    </div>
</div>

<div id="experience">
    <div class="Video">
        <iframe id="Youtube" width="650" height="366" src="http://www.youtube.com/embed/XS6S8qSMvBE?wmode=opaque" frameborder="0" wmode="transparent" allowfullscreen  ALLOWTRANSPARENCY="true"></iframe>

        <button class="prev">&nbsp;</button>
        <button class="next">&nbsp;</button>
        <div class="VideoControls">
            <ul class="Vid">
                <li id="01" class="Video1" onClick="_gaq.push(['_trackEvent', 'Pulse', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="02" class="Video2" onClick="_gaq.push(['_trackEvent', 'Performance', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="03" class="Video3" onClick="_gaq.push(['_trackEvent', 'Parking Assist', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="04" class="Video4" onClick="_gaq.push(['_trackEvent', 'Flow', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="05" class="Video5" onClick="_gaq.push(['_trackEvent', 'Spike', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="06" class="Video6" onClick="_gaq.push(['_trackEvent', 'Product film', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

你能发布你的html代码吗？可能是您的 html 中的拼写错误，找不到 $("#experience")
当您引用我们不知道的代码时，我们无法帮助你们......
为什么不是这个 jquery？ @JohannesKlauß
您的代码看起来不错，但在引用我们不知道的 html 元素时可能会出现一些错误
@AbdulWahhab 我说的是你的 HTML。您对 HTML id 的引用，但我们不知道您的 DOM 是什么样子。因此，如果您的 JS 的一部分在尝试访问 ID 时中断，我们将无法为您提供帮助。

标签： jquery web scroll scrollto

【解决方案1】：

在您的网站脚本中，您有以下代码：

$('.nav li#experiencenav a').click(function(){
     $('body').animate({scrollLeft: $("#experience .EmptyPage").offset().left-20}, 1200, function(){
      $(this).parent().addClass('active');
      $('li#homenav, li#discovernav, li#explorenav, li#downloadnav').removeClass('active');
     });
      return false;
    });

它找不到元素$("#experience .EmptyPage")。但是你的 #explore div 里面有这个 div：

<div class="EmptyPage">
 &nbsp;
</div>

这就是为什么您的代码适用于探索链接，但不适用于其他链接。

【讨论】：

是的，我现在才看到，哈哈，这都是工作压力：P 我的经理只给了 3 天时间来完成整个网站-_-。非常感谢