将对象值传递到每个href链接

时间:2017-08-07 19:33:19

标签: javascript jquery handlebars.js

您好我正在尝试动态创建锚链接。

链接本身是使用句柄栏模板

创建的
{{#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>

任何帮助解决这个问题表示赞赏!

0 个答案:

没有答案