jQuery的this.hash行为在页面锚链接 [英] jQuery this.hash behavior for in page anchor links

问题描述

我有一个关于如何在jQuery的页面定位链接中使用this.hash的问题。

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

 < a href =＃fooclass =inpageLink> Click Me！</ a> 
 ... 
 ... 
< a id =foo>< / a> 
< h3>目标位置< / h3> 
  

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

  $（'。inpageLink'）。click（function（）{
 var target = $（this.hash）; 
 if target.length！= 0）{
 alert（found target+ this.hash）; 
} 
}）
  

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

 < a href =＃barclass =inpageLink>点击我！< / a> 
< a name =bar><< ; / a> 
< h3>目标位置< / h3> 
  

，点击事件不会触发警报。

完整示例在这里

有人可以解释我在这里错过了什么，或者如果这是它应该如何工作？ #foo这也是有效的 ID选择器 ^{[docs ]} 。因此， $（this.hash）与 $（＃foo）相同， ID foo 。

在第二个示例中，您没有ID 杆。因此 $（this.hash）不会选择任何元素， target.length 将会是 0 。

---

也许你对浏览器仍然跳转到< a name =bar>< / a> ，但 alert 未显示。浏览器的行为与jQuery不一样。

来自关于名称属性的HTML规范：

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

因此，如果浏览器识别出URL，它会尝试使用该ID或具有该名称的第一个 a 元素查找第一个元素。

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

---

散列值始终是指ID或名称，您可以使用多重选择器进行一次选择：

  $（this.hash +'，a [name =''+ this.hash.substr（1）+']'）
  

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

I have a question about how this.hash works for in page anchor links in jQuery.

I need to process the hash attribute every time the user clicks on that link.

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

For the above HTML snippet, when I fetch the hash attribute, everything works fine.

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

However, when I use name attribute instead of id attribute for the target, this.hash returns a null object.

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

In this case, the click event does not fire the alert.

The full example is here

Can someone explain what I am missing over here or if this is how it is supposed to work?

解决方案

this.hash will return "#foo" which is also a valid ID selector ^[docs]. Hence $(this.hash) is the same as $("#foo") and will select the element with ID foo.
In your second example, you don't have an element with ID bar. Thus $(this.hash) won't select any element and target.length will be 0.

---

Maybe you are confused by the fact that the browser still jumps to <a name="bar"></a>, although the alert is not shown. The browser does not behave the same as jQuery.

From the HTML specification about the name attribute:

This attribute names the current anchor so that it may be the destination of another link. The value of this attribute must be a unique anchor name. The scope of this name is the current document. Note that this attribute shares the same name space as the id attribute.

So if the browser recognises a hash (fragment identifier) in the URL, it tries to find the first element with this ID or the first a element with that name.

In contrast, CSS ID selectors (that's what jQuery is using) only search for elements with that ID, not for (a) elements with that name. Internally, jQuery is using document.getElemenById.

---

If the hash value is always referring to either an ID or a name, you can use the multiple selector to just make one selection:

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

In case there would be an element with this ID and an anchor with this name, you'd select all of them though.

这篇关于jQuery的this.hash行为在页面锚链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！