3

我一直在寻找这样做的方法很长一段时间，我开始认为这是不可行的。我不能说我是 html 或 CSS 方面的专家，但我做了很多研究，没有找到针对这个特定问题的教程。

我正在编写要在线发布的软件用户指南。该指南将包括软件的屏幕截图和数字。原始代码（我不是这个项目的第一个）只是硬编码每个图像的数字，随着更多信息的添加，这变得越来越乏味。

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

如果这是问题的唯一方面，我会简单地使用 CSS 计数器并完成它。但是，我也希望能够参考指南文本中的具体数字。我的问题是：有没有办法在 CSS 中做到这一点？

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

如果这在 CSS 中是不可能的，是否有另一种语言可以做到这一点？

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

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

我正在使用<script></script>文档正文中的标签，调用位于头部的 javascript 函数。我知道语法一定是正确的，因为 firefox 和 google chrome 都可以很好地加载页面。这仅仅是 IE 对某些事情的挑剔吗？（我检查了，这不是我的安全设置）。

4

1 回答 1

0

问题是，通过页面索引（递增）和您维护的某个数字编号（也递增）来引用事物是两个相同的解决方案。

实际问题：文档越长，使用有序数字标识符序列维护图形列表就越困难。

解决方案：给数字命名，而不是数字，并生成一个数字显示给用户。这为用户提供了有序编号，并允许您引用具有易记名称的图形，但不需要您在每次编辑后重新排序或修改图形编号。这是一个使用 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>
于 2012-06-02T14:13:03.603 回答