我不明白为什么我的函数不起作用,为什么我在尝试运行它时总是收到“测试未定义错误”。
当用户单击右侧菜单项时,我希望页面向下滚动到适当的部分。
<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);
};
我本来想让列表项本身启动功能,但我想它必须是一个按钮?
最佳答案
你没有显示函数 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);
});
尽管 <a>
不需要元素,它们确实会导致鼠标指针发生变化。
关于javascript - 控制台功能未定义错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20987770/