如何使 jQuery .click 函数更具可扩展性答案

【问题标题】：How to make jQuery .click function more scaleable如何使 jQuery .click 函数更具可扩展性
【发布时间】：2010-10-30 03:13:07
【问题描述】：

我在让它工作时遇到了一些麻烦。我在一个页面上有几个锚标签，它们使用 scrollTop 作为动画。 HTML 示例

链接

<a id="TOS" href="#Svc">What are your terms of service?</a>

和目标

<div class="tabWrapp" name="TOS" id="Svc">
<!-- /tos tabWrapp --></div>

和jquery

$('a#TOS').bind('click',function() {
     var pos = $('#Svc').offset().top;
     $('html,body').animate({scrollTop : pos}, 500);
     return false;  //stops navigation from adding the id to the url
   });

现在，在同一页面上有 30 多个这样的内容变得相当臃肿。我可以修改代码以将类应用于锚点并像这样从 url 中创建一个变量

$('.foo').bind('click', function() {
var href = (this).attr('ID');
var pos = href.offset().top;
$('html,body').animate9{scrollTop : pos}, 500);
return false;
});

我遇到的问题是将锚 ID 定位在 href var 中，然后将其放置在 pos var 中...thx

【问题讨论】：

标签： jquery

【解决方案1】：

您可以为所有这些链接赋予相同的类，如下所示：

<a class="scrollTo" href="#Svc">What are your terms of service?</a>

然后让你的函数绑定到那个类，像这样：

$('a.scrollTo').bind('click',function() {
  var pos = $(this.hash).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

这将绑定到所有链接，但使用您单击的链接的.hash 来获取 scrollTop 目标。

【讨论】：

你知道，对于我所做的所有 JS/html...我从未想过使用锚点的 hash 属性。
@mway - 它已经有了#，所以它是一个很棒的ID选择器......并且在禁用JS启动的情况下优雅地降级，双赢:)
我建议使用event.preventDefault() 而不是return false。更多关于为什么在这里：stackoverflow.com/questions/1357118/…

【解决方案2】：

如果我理解正确你的意思，是的，你可以。您必须在 javascript 中使用哈希函数。

所以对于你的标记，如果你有

<a class="foo" id="TOS" href="#Svc">What are your terms of service?</a>

这个 JS 会提示 "#Svc" ：

$('a.foo').click(function() {
     alert(this.hash);
   });

所以在你的例子中，用它来制作：

$('a.foo').click(function() {
  var pos = $(this.hash).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

顺便说一句，你可以使用

.click(function() {});

作为

的快捷方式

.bind('click', function() {});

更多详情here

【讨论】：

【解决方案3】：

我以前没有使用过这种 ID，但也许您可以尝试使用 title 代替？然后你就可以在选择器中使用它，比如$(my_title).offset().top。希望对您有所帮助。

【讨论】：

【解决方案4】：

你必须先通过Id找到元素：

$('.foo').bind('click', function() {
  var href = $(this).attr('ID');
  var pos = $('#'+href).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

在href 周围添加$('#element') 应该可以，不是吗？

【讨论】：

【解决方案5】：

试试这个：

$('a[ID]').bind('click', function() {
var href = $(this).attr('href');
var pos = $(href).offset().top;
$('html,body').animate({ scrollTop : pos}, 500);
return false;
});

为我工作。我调整了href var。很确定就是这样。 a[ID] 作为选择器以任何具有 ID 的锚为目标。

【讨论】：