Question

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

例如，说其中一个帖子的格式如下：

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

有多个帖子，底部有一个空容器，用于附加最近的帖子链接：

<div id="get-post"></div>

我的JS代码基本上用post类抓取每个标题，并从元素的标题创建一个哈希链接（删除空格和逗号）。然后，它创建并附加由帖子标题组成的文本节点，然后将整个链接附加到get-post容器中。

var postList = $('#get-post'); var post = $('.post'); function generateRecentPosts() { post.each(function() { // Create link from post title that will be used to // access that post. var postLink = document.createElement('a'); // Create text node from post title that will be appended // to the postLink. var text = document.createTextNode($(this).html()); // Add elements to the DOM. postLink.href = createLocalLink($(this)); postLink.appendChild(text); postList.append(postLink); postList.append('<br />'); }); } function createLocalLink(elm) { // Creates the href link that will be used to go to a blog post. // For example, if the title of the elm parameter is "My Post", // a link is created called #My-Post that will be used to access // that post. elm.id = elm.html().replace(/,/g, '').replace(/\s/g, '-'); console.log(elm.id); // Make sure the ID is added. return '#' + elm.id; } generateRecentPosts();

我的问题是它生成的链接不指向为每个标题创建的ID。当我点击链接时，我可以看到它成功创建了href哈希#My-Post并将其添加到锚标签中，但它不会将我带到帖子标题。

示例：http://jsfiddle.net/samrap/GQtxL/

我甚至添加了一个控制台日志功能，以确保将ID添加到标题中，因为我认为这是问题，但这不是因为控制台正在打印正确的新ID。我真的可以帮助找出问题究竟在哪里。

Answer 1

您的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 />');

这是您的小提琴更新：http://jsfiddle.net/GQtxL/1/

Answer 2

这是因为您的链接使用了href =“＃My-Post”，但没有帖子的ID为“My-Post”。它只有一个“帖子”类。

这是因为您传递给createLocalLink（）函数的参数是DOM节点。但是通过执行elm.id，您不会更改DOM属性，而是向“elm”对象添加另一个属性。因此，你的“榆树”对象是

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

因此，实际的帖子永远不会获得属性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（除了您的链接），以便它可以正常工作。

Answer 3

在函数createLocalLink中，您使用elm参数作为dom节点，但实际上将jQuery包装的对象传递给它，它没有id属性。要使其发挥作用，请使用elm.get(0).id = ...或elm.attr('id', elm.text().replace(/,/g, '').replace(/\s/g, '-'););

Javascript将ID和哈希链接添加到新ID

3 个答案: