Javascript向新ID添加ID和哈希链接

几个月前我“学习”了JavaScript，但很快就学会了Python，并在过去的几个月里用这种语言编写程序，所以我决定回去实际学习JavaScript是个好主意。现在，我正在用JS制作一个非常简单的“博客”，它获取文章的标题，从文章中生成一个哈希链接，并创建一个最近的文章部分，您可以单击该链接跳转到页面中的文章

例如，假设其中一篇文章的格式如下：

<h2 class="post">Another post for you</h2>
<h4>I know you love these</h4>

我的问题是，它生成的链接不指向为每个标题创建的ID。当我点击链接时，我可以看到它成功地创建了href hash

#My Post

，并将其添加到锚定标记中，但它不会将我带到帖子标题

例如：

---

我甚至添加了一个控制台日志函数，以确保ID被添加到标题中，因为我认为这是问题所在，但这并不是因为控制台正在打印正确的新ID。我确实需要一些帮助来找出问题的确切位置。

您的

h2

标签需要有一个与链接对应的

ID

或

name

属性，这就是内部链接工作的原因。未添加

id

，因为您正在访问jQuery对象，就像它是DOM节点一样（

elm.id=…

）。修改

createLocalLink

函数以使用jQuery的

attr

方法设置

id

属性：

elm.attr('id', elm.html().replace(/,/g, '').replace(/\s/g, '-'));

此外，由于jQuery可用，您可以将代码缩减为：

var $this = $(this),
    link = createLocalLink($this);

var $postLink = $('a', {
    text: $this.text(),
    href: link
})

postList.append($postLink).append('<br />');

var$this=$（this），
link=createLocalLink（$this）；
var$postLink=$（'a'{
text:$this.text（），
href:link
})
append（$postLink.append（“
”）；

---

这是你的提琴更新：

这是因为你的链接使用href=“#我的帖子”，但没有一篇帖子的ID是“我的帖子”。它只有一个类“post”

发生这种情况是因为传递给createLocalLink（）函数的参数是DOM节点。但是，通过执行elm.id，您并没有更改DOM属性，而是向“elm”对象添加了另一个属性。因此，您的“elm”对象是

x.fn.x.init[1]
0: h2.post
context: h2.post
id: "Another-post-for-you"
length: 1
__proto__: Object[0]

因此，实际的post永远不会获得属性ID，只有“elm”对象才能获得它。注意下面的空ID属性

draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "Another post for you"
innerText: "Another post for you"

因此，您的文档没有ID为“My Post”的元素。您可以查看HTML的源代码来验证这一点

要使内部链接正常工作，应该有一个与链接的href属性中使用的ID相同的元素

比如说

<div id="post1">
 Your Post Here
</div>

<!--just to show the effect of moving to the post-->
<div style="clear:both; height:900px"></div>

<a href = "#post1">Click Here</a>

你在这里的职位

---

这将起作用，因为有一个id为“post1”的元素，该链接使用href“#post1”将其链接到相应的元素。因此，也可以将相应的id添加到帖子中（链接除外）。

在函数

createLocalLink

中，您使用

elm

参数作为dom节点，但实际上向其传递了一个jQuery包装的对象，该对象没有

id

属性。要使其工作，请使用

elm.get（0.id=…

或

elm.attr（'id'，elm.text（）.replace（/，/g'，）.replace（/\s/g，'-'）；）
请发布一个附加的帖子示例及其相应的链接，另外，您可能应该使用
text（）
而不是
html（）
来生成id，以避免可能插入特殊字符将JSFIDLE示例添加到text（）中函数这就是我在
createLocalLink（）
这一行中所做的：
elm.id=elm.html（）.replace（/，/g'，）.replace（/\s/g'，-）？这就是我在
createLocalLink（）
这行中所做的：
elm.id=elm.html（）.replace（/，/g'，）.replace（/\s/g'，-）？看到问题，更新了我的答案。您使用的是
.id
，应该是
attr（'id'，…）
谢谢，而且，我还了解到使用jq创建元素的速度较慢，这有很大区别吗？它并不慢，事实上可以更快，这取决于创建元素的操作和方法（主要是因为jQuery使用createDocumentFragment来最小化回流（），因为jQuery不返回DOM节点（如果适用），它返回对jQuery对象的引用，该对象将接受
id
属性，但不会将其绑定到它包含的DOM节点。您可以使用
$（选择器）。获取（0）
或
$（选择器）[0]
用于直接访问DOM节点
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "Another post for you"
innerText: "Another post for you"

<div id="post1">
 Your Post Here
</div>

<!--just to show the effect of moving to the post-->
<div style="clear:both; height:900px"></div>

<a href = "#post1">Click Here</a>