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>

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

1 个答案: