Question

我有一个关于this.hash如何在jQuery中的页面锚点链接中起作用的问题。

每次用户点击该链接时，我都需要处理哈希属性。

<a href="#foo" class="inpageLink">Click Me!<"/a>
...
...
<a id="foo"></a>
<h3>Target Location</h3>

对于上面的HTML代码段，当我获取哈希属性时，一切正常。

$('.inpageLink').click(function(){
    var target = $(this.hash); 
    if (target.length != 0) {
        alert("found target" + this.hash);
    }
})

但是，当我为目标使用name属性而不是id属性时，this.hash返回一个null对象。

<a href="#bar" class="inpageLink">Click Me!</a>
<a name="bar"></a>
<h3>Target Location</h3>

在这种情况下，click事件不会触发警报。

The full example is here

有人可以解释我在这里失踪的内容，或者这是否应该如何运作？

Answer 1

this.hash将返回"#foo"，这也是有效的ID selector ^[docs]。因此$(this.hash)与$("#foo")相同，并会选择 ID foo的元素。
在第二个示例中，您没有ID为bar的元素。因此$(this.hash)不会选择任何元素，而target.length将是0。

尽管<a name="bar"></a>未显示，但浏览器仍会跳转到alert这一事实可能让您感到困惑。浏览器的行为与jQuery不同。

来自HTML specification about the name attribute：

此属性命名当前锚点，以便它可能是另一个链接的目标。此属性的值必须是唯一的锚名称。此名称的范围是当前文档。请注意，此属性与id属性共享相同的名称空间。

因此，如果浏览器识别出URL中的散列（片段标识符），它会尝试查找具有此ID的第一个元素或具有该名称的第一个a元素。

相比之下，CSS ID选择器（jQuery正在使用的）仅搜索具有该ID的元素，而不搜索具有该名称的（a）元素。在内部，jQuery正在使用document.getElemenById。

如果哈希值始终引用ID或名称，则可以使用多选择器进行一次选择：

$(this.hash + ', a[name="' + this.hash.substr(1) + '"]')

如果有一个带有此ID 的元素和具有此名称的锚点，您可以选择所有这些。

Answer 2

因为选择器$(this.hash)在第二种情况下找不到任何内容，this.hash返回#foo然后$("#foo")查找ID为foo的元素第二种情况没有返回

http://jsfiddle.net/BQU3u/5/

Answer 3

为什么我们不能使用attr（'href'） - 请检查此链接

http://jsfiddle.net/BQU3u/11/

<强>更新

只需从$（this.hash）中删除$

http://jsfiddle.net/BQU3u/12/

jQuery this.hash在页面锚链接中的行为

3 个答案: