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

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事件不会触发警报.

完整的例子就在这里

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

Answer 1

this.hash将返回"#foo"哪个也是有效的ID选择器 ^[docs].因此与选择具有ID的元素$(this.hash)相同. 在第二个示例中,您没有带ID的元素.因此不会选择任何元素,将是.$("#foo") foo
bar$(this.hash)target.length0

也许你对浏览器仍然跳转的事实感到困惑<a name="bar"></a>,尽管alert没有显示.浏览器的行为与jQuery不同.

从关于name属性的HTML规范:

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

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

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

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

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

如果有一个带有这个ID的元素和一个带有这个名字的锚,你可以选择所有这些.