javascript - 自动更新对网页上其他标题的引用

Question

我已经搜索了很长时间来寻找实现此目的的方法，但我开始认为这是不可行的。我不能说我是 html 或 CSS 方面的专家，但我做了很多研究，但没有找到针对这个特定问题的教程。

我正在编写一份软件用户指南以发布到网上。该指南将包括软件的屏幕截图，以及图号。原始代码(我不是这个元素的第一个)只是在每个图像的数字中硬编码，随着更多信息的添加，这变得越来越乏味。

我知道有一种方法可以简单地添加一个新图像，然后标记标题以包含一个自动递增的图号。这将非常有帮助，因为如果添加一个新图形，新图形之后的所有图形中的数字都会自动更改。

如果这是问题的唯一方面，我会简单地使用 CSS 计数器并解决它。但是，我也希望能够在指南的文本中引用特定的数字。我的问题是:有没有办法在 CSS 中做到这一点？

指南中的一个文本示例是“图 n 显示用于自定义 x 的对话框。”有没有一种方法可以在不对数字进行硬编码的情况下引用指南中的第 n 个数字？

如果这在 CSS 中做不到，是否有其他语言可以做到？

编辑:澄清一下:数字本身将被连续标记。但是，如果我想在我的文本中引用图 3，例如，它可以在任何地方。

编辑 2: 我尝试过使用数组的 javascript 实现。但是，现在某些版本的 Internet Explorer 似乎拒绝显示我的代码的脚本部分。

我正在使用 <script></script>我文档正文中的标记，调用位于头部的 javascript 函数。我知道语法必须正确，因为 firefox 和 google chrome 都可以很好地加载页面。这只是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>