自動更新對網頁上其他標題的引用

Question

我一直在尋找相當一段時間的方法來做到這一點，我開始認爲這是不可行的。我不能說我是HTML或CSS方面的專家，但我已經做了大量的研究，並沒有找到關於這個特定問題的教程。

我正在編寫軟件用戶指南，以便在線發佈。該指南將包含軟件的屏幕截圖以及圖號。原始代碼（我不是這個項目中的第一個）只是在每個圖像的編號中硬編碼，隨着更多信息的添加，這變得越來越乏味。

我知道有一種方法可以簡單地添加一個新的圖像，然後標記標題以包含一個自動遞增的圖號。這會非常有用，因爲如果添加了新數字，新數字後的數字會自動改變。

如果這是問題的唯一方面，我會簡單地使用CSS計數器並完成它。不過，我也希望能夠參考指南中的具體數字。我的問題是這樣的：有沒有辦法在CSS中做到這一點？

指南中的文本示例爲「」圖n顯示用於自定義x的對話框。有沒有一種方法可以引用指南中的第n個數字而不需要對數字進行硬編碼？

如果這在CSS中不可行，是否有另一種語言可以做到這一點？

編輯：澄清：數字本身會連續標註。但是，如果我想在我的文本中參考圖3，例如，它可能在任何地方。

編輯2：我試過使用數組的javascript實現。但是，現在似乎某些版本的Internet Explorer拒絕顯示我的代碼的腳本部分。

我在我的文檔正文中使用了<script></script>標籤，調用位於頭部的javascript函數。我知道語法必須正確，因爲Firefox和谷歌瀏覽器都加載頁面就好了。這僅僅是IE對某些東西的挑剔嗎？ （我檢查過，這不是我的安全設置）。

Answer 1

事情是指，通過其頁面索引（遞增）和某些圖形編號保持（也遞增）的事情是兩個相同的解決方案。

實際的問題：維護數字列表與一系列有序的數字標識符變得越來越難，文檔變得越長。

解決方案：給出數字名稱，而不是數字，並生成一個數字以供用戶顯示。這爲用戶提供了有序的編號，並允許您使用令人難忘的名稱引用數字，但不要求在每次編輯後重新排序或修改數字編號。下面是使用jQuery的一個簡單示例：

<h2>How to add a contact</h2> 
<img id="add-contact" class="figure" src="figures/add-contact.png" /> 
<p><a href="#add-contact">This screenshot</a> shows the location of the Add Contact button.</p> 

<script type="text/javascript"> 
    $(function() { 
    var figNum = 0; 
    $(".figure").each(function() { 
     figNum++; 
     $("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")"); 
    }); 
    }); 
</script>