Shopify jQuery 页面导航 - 按 id 获取导航标题

Question

我有一个 Shopify 网站，其中包含很长的博客文章，我正在寻找一种方法来为基于 H2 标签的博客页面模板左侧的文章创建导航。

我使用了一些简单的 jQuery 和 id 来链接到页面的不同部分。这是我目前所拥有的。

HTML（模板）

  <div class="col-md-3">
    <ul class="article-nav">
      <li><a href="{{ article.url }}/#g1" alt="" id="title1">Group 1</a></li>
      <li><a href="{{ article.url }}/#g2" alt="" id="title2">Group 2</a></li>
      <li><a href="{{ article.url }}/#g3" alt="" id="title3">Group 3</a></li>
      <li><a href="{{ article.url }}/#g4" alt="" id="title4">Group 4</a></li>
    </ul>
  </div>
  <div class="col-md-9">
    {{ article.content }}
  </div>

现在这是博客文章本身的代码

<h2 id="g1">This is my first title</h2>
<p>Some content ...</p>
<h2 id="g2">This is my second title</h2>
<p>Some content ...</p>
...

这是我必须将所有内容放在一起的 jQuery

var tr1 = $(g1).text();
var tr2 = $(g2).text();
var tr3 = $(g3).text();
var tr4 = $(g4).text();
$(title1).html( tr1 );
$(title2).html( tr2 );
$(title3).html( tr3 );
$(title4).html( tr4 );

我不是 javascript 或 jQuery 方面的专家。有没有办法简化这段代码？看来我现在写的太多了，可能会收紧。

Answer 1

使用 jquery：

$(document).ready(function(){
    var rows = 4;//quantity of articles
    for(i = 1; i <= 4; i++ ){
      var txt = $('#g'+i).text();
      $('#title'+i).html(txt);
    }
})