Question

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

由于我们生活在未来，当用户在单词上盘旋时，我想指出所有相关脚注的范围。例如：

enter image description here

我的背景是HTML / CSS / JS，我很乐意使用CSS来使堆叠看起来很漂亮。 这是我自己无法弄清楚的HTML本身，你们中是否有人想过如何将这些SPAN叠加在另一个之上？

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

Answer 1

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

这是我自己无法弄清楚的HTML本身，你们中是否有人想过如何将这些SPAN叠加在一起？

其他跨度的子跨度将自动在其父级之上进行z索引，因此html可能如下所示：

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

您可以在css中指定子跨度不同的样式（如您所知，添加完整性）：

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

如何告诉jQuery在悬停时来回计算单词并添加标签？

这部分非常困难。当您在javascript中鼠标悬停时，您可以获取元素内容的文本以及有关鼠标位置的各种信息。

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

理论上，可以使用地图的组合并可能触发点击（通过Selection API）来找出光标下面的单词，但它可能不会很好地与你的ui一起工作。祝你好运！

Answer 2

我从昨天起就开始研究这个概念，并且能够提出一个初步的工作小提琴 - FIDDLE。

一般的想法是：

将所有单词和相关描述符放在数组中。
动态显示字词。
将隐藏数据与动态显示的每个单词相关联。
当您将鼠标悬停在单词上时，相关数据（多个不同级别的描述符）会显示在您希望显示的位置。

JS

var mydata = [
              ['four', 'a number', 'four score = 80', 'total of 87 years'],
              ['score', 'a word', 'four score = 80', 'total of 87 years'],
              ['and', 'a word', '', 'total of 87 years'],
              ['seven', 'a number', '', 'total of 87 years'],
              ['years', 'a word', '', 'total of 87 years'],
              ['ago', 'a word', 'ago = in the past', '']
              ];

for(var v=0; v<6; v++)
   {
    $('.holder').append("<div class='num" + v + "'>" + mydata[v][0] + '-' + " </div>");
    $(".num" + v).data( 'dataval1', mydata[v][1] );
    $(".num" + v).data( 'dataval2', mydata[v][2] );
    $(".num" + v).data( 'dataval3', mydata[v][3] );
    }

$('.holder div').on('mouseenter', function(){
  $('.putmehere').html(
                        $( this ).data('dataval1') + "<br />" +
                        $( this ).data('dataval2') + "<br />" +
                        $( this ).data('dataval3') + "<br />"
  );
});
$('.holder div').on('mouseleave', function(){
  $('.putmehere').html('');
});

使用jQuery将多个样式添加到同一文本

2 个答案: