1

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

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

在此处输入图像描述

我的背景是 HTML/CSS/JS,我很乐意使用 CSS 来使所有的堆叠看起来不错。这是我无法弄清楚的 HTML 本身,你们中的任何人都知道如何将这些 SPAN 堆叠在另一个之上吗?

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

4

2 回答 2

0

从昨天开始,我一直在研究这个概念,并且已经能够想出一个初步的工作小提琴 - FIDDLE

总体思路是:

  1. 将所有单词和相关描述符放在一个数组中。

  2. 动态显示单词。

  3. 将隐藏数据与动态显示的每个单词相关联。

  4. 当您将鼠标悬停在某个单词上时,相关数据(许多不同级别的描述符)会显示在您希望它们显示的任何位置。

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('');
});
于 2014-05-23T04:04:53.177 回答
0

您描述的问题很有趣,但实际上实现起来相当复杂,所以我将一一回答您的问题。

这是我无法弄清楚的 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 中将鼠标悬停在某物上时,您可以获得元素内容的文本以及有关鼠标位置的各种信息。

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

从理论上讲,可以使用地图组合并可能触发点击(通过选择 API)来找出光标下的哪个单词,但它可能不适用于您的 ui。祝你好运!

于 2014-05-21T11:34:08.223 回答