javascript - 控制台功能未定义错误？

Question

我不明白为什么我的函数不起作用，为什么我在尝试运行它时总是收到“测试未定义错误”。

当用户单击右侧菜单项时，我希望页面向下滚动到适当的部分。

<ul class="timelineNav">
            <li class="navItem">
               <button type="button" onclick='test("1")'>
                   Event1
               </button>
            </li>
            <li class="navItem"><a class="navItem"    href="url">Event2</a></li>
            <li class="navItem"><a class="navItem" href="url">Event3</a></li>
            <li class="navItem"><a class="navItem" href="url">Event4</a></li>
            <li class="navItem"><a class="navItem" href="url">Event5</a></li>
</ul>

    <article id="post1"> 
            some text
    </article>
    <article id="post2"> 
            some text
    </article>
    <article id="post3"> 
            some text
    </article>

Javascript 函数:

function test(postLocation){
var post = $('#post'+postLocation).offset();
$(window).scrollTop(post.top);

};

我本来想让列表项本身启动功能，但我想它必须是一个按钮？

Answer 1

你没有显示函数 test() 在哪里已定义，但如果它在文档就绪处理程序(或任何其他函数)内，则它不在全局范围内，因此不能从 onclick 调用它属性。

或者:

(1) 停止使用 onclick属性并将点击事件处理程序绑定(bind)到元素。

(2) 将函数的定义移到文档就绪处理程序之外。

(3) 定义函数如下:

window.test = function(postLocation) {
    var post = $('#post'+postLocation).offset();
    $(window).scrollTop(post.top);
};

此外，您不必使用按钮。您应该能够通过单击列表项来执行函数。

---

我建议如下:

HTML:

<ul class="timelineNav">
    <li><a href="#post1">Event 1</a></li>
    <li><a href="#post2">Event 2</a></li>
    <li><a href="#post3">Event 3</a></li>
    <li><a href="#post4">Event 4</a></li>
</ul>

<article id="post1"> 
    some text
</article>

<article id="post2"> 
    some other text
</article>

JQuery:

$('.timelineNav').children('li').children('a').click(function(event) {
    event.preventDefault();
    var $article = $($(this).attr('href'));
    $(window).scrollTop($article.offset().top);
});

JSFiddle DEMO

尽管 <a>不需要元素，它们确实会导致鼠标指针发生变化。