您好我正在尝试动态创建锚链接。
链接本身是使用句柄栏模板
创建的{{#each anchor-links}}
<li><a href="">{{anchor-name}}</a></li>
{{/each}}
这样,用户可以使用anchor-name属性轻松定义链接的前端名称值,并使用yml数据控制链接数。
对于此示例,该位代码呈现三个链接。 HTML输出如下所示:
<li><a href="">Section 1</a></li>
<li><a href="">Section 2</a></li>
<li><a href="">Section 3</a></li>
我通过查找具有id的所有section元素(这应该是href中的内容)并迭代该数组来获取href值:
this.$links = this.$el.find('li a');
this.$destination = $('section[id]').map(function(){ return this.id });
createLinks(){
let i = 0;
this.$links.attr('href', '#' + this.$destination[i]);
for (i = 0; i < this.$destination.length; i++){
console.log(this.$destination[i]);
}
}
然而,我得到的输出看起来像这样:
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-1">Section 2</a></li>
<li><a href="#section-1">Section 3</a></li>
我希望它看起来像这样根据查找id为
的部分返回的值<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-2">Section 3</a></li>
任何帮助解决这个问题表示赞赏!