javascript - 在这种情况下使用 onclick 事件处理程序是否可以接受？

Question

我有一个带有子菜单的简单导航菜单。当在同一页面上单击子菜单中的链接时，窗口将使用 jQuery 滚动到相应的 anchor 。

这是一个子菜单列表项的示例:

<li><a href="page.html#some-anchor" onclick="clickScroll('#some-anchor');"><span>foo</span></a></li>

对应的 anchor 是这样的:

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

JavaScript 函数:

function clickScroll(dest) {
    $('html, body').stop().animate({
        scrollTop: $(dest).offset().top
    }, 1000);
}

一切都很好，但像我之前的许多人一样，我一直在读到内联事件处理程序这些天是不好的做法。

如何修改函数以消除对任何 onclick 调用的需要？请记住，每个子菜单链接对应一个不同的 anchor 。

Answer 1

假设您希望所有具有哈希值 # 的 anchor 滚动到具有相同 ID 的相应 anchor ，您可以循环遍历所有 anchor ，解析出哈希值并滚动到相同的 ID:

$('a').each(function() {
    if ( this.hash ) {
        $(this).click(function(e) {
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            e.preventDefault();
        });
     }
});

http://jsfiddle.net/nGfW5/

如果您想将此功能限制在某些 anchor 上，请添加一个类并将其插入选择器中，f.ex $('a.hashlink').each(