Shopify jQuery頁面導航 - 通過編號獲取導航標題

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); 
    } 
})