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

Question

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

以下是子菜单列表项的示例：

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

对应的锚点如下所示：

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

JavaScript function：

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

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

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

Answer 1

假设您希望所有具有 hash #的锚点滚动到具有相同 ID 的相应锚点，您可以遍历所有锚点，解析出 hash 并滚动到相同的 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/

如果您想将此功能限制为某些锚点，请添加 class 并将其插入选择器 f.ex $('a.hashlink').each(

Answer 2

使用事件处理程序： http://api.jquery.com/on/

 <li><a id="some-scroll-source" href="page.html#some-anchor"><span>foo</span></a></li> <a class="hidden-anchor" id="some-anchor" name="some-anchor"></a> (function () { function clickScroll() { var dest = $('#' + ($(this).attr('href').split('#')[1])); $('html, body').stop().animate({ scrollTop: $(dest).offset().top }, 1000); } $('#some-scroll-source').on('click', clickScroll);; }());

Answer 3

尝试这个：

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