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属性并将click事件处理程序绑定到元素。

（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>元素，但它们确实会导致鼠标指针发生变化。

Answer 2

更新了HTML

在按钮中添加了id以便更好地选择jquery

<ul class="timelineNav">
    <li class="navItem">
        <button type="button" id="clickbutton">Event1</button>
    </li>
   ...

<强> JS 将事件附加到按钮，删除内联事件单击

$(function () {
    $('.navItem').on('click', '#clickbutton', function () {
        var location = 1; //define or fetch your location here
        var post = $('#post' + location).offset();
        alert(post);
        $(window).scrollTop(post.top);
    });
});

Demo

控制台功能未定义错误？

2 个答案: