jquery - 使用 jQuery 向同一文本添加多种样式

Question

我网页的每一个词都会有脚注，用户会点击词/词组来查看脚注。然而，一些脚注重叠，即脚注 1 可能适用于当前单词，而脚注 2 适用于整个短语开始当前单词。

因为我们生活在未来，当用户将鼠标悬停在一个词上时，我想指出所有相关脚注的范围。示例:

我的背景是 HTML/CSS/JS，我很乐意使用 CSS 使所有堆叠看起来很漂亮。 我无法理解 HTML 本身，你们中有没有人知道如何将这些 SPAN 一个接一个地堆叠起来？

理想情况下，原始输入不应该有一百万个 SPAN 用于标记……我想 JS 应该根据单词在段落中的位置插入跨度。所以在上面的例子中，当你将鼠标悬停在单词“score”上时，JS 会插入一个从单词 2(“score”)开始的一个单词跨度，一个从单词 1(“Four”)开始的四个单词跨度，以及从单词 1(“四”)开始的六个单词跨度。如果这是最好的方法，我如何告诉 jQuery 在悬停时来回计算单词数并添加标签？

Answer 1

你描述的问题很有趣，但实际上实现起来很复杂，所以我会一一回答你的问题。

这是我无法理解的 HTML 本身，你们中有人知道如何将这些 SPAN 一个接一个地堆叠吗？

作为其他 span 的子级的 span 将自动在其父级之上进行 z 索引，因此 html 可以如下所示:

<div class="container">
  <span>
    <span>
      Four <span>score</span> and seven
    </span> years ago
  </span>
  our fathers...
</div>

您可以在您的 css 中为子 span 分配不同的样式(如您所知，添加是为了完整性):

.container span {..}
.container span > span {...}

我如何告诉 jQuery 在悬停时来回计算字数并添加标签？

这部分很难。当你在 javascript 中将鼠标悬停在某个东西上时，你可以获得元素内容的文本以及有关鼠标位置的各种信息。

尝试计算单词的边界框是没有意义的，因为每个浏览器和每个操作系统都会以不同的方式呈现文本，更不用说非等宽字体的每个字符都有不同的宽度。

理论上，可以结合使用 map 并可能触发点击(通过选择 API)来找出光标下的单词，但它可能无法很好地与您的用户界面配合使用。祝你好运!