单击时如何突出显示一个句子？

Question

给定变量${text},表示一大块文本,如...

...

利比亚面积近1,800,000平方公里(700,000平方英里),是非洲面积第四大的国家,也是世界第17大国.[9] 首都的黎波里拥有170万利比亚640万人口.该国的三个传统地区是Tripolitania,Fezzan和Cyrenaica.截至2009年,利比亚的非洲人类发展指数最高,非洲人均国内生产总值(PPP)排名第四,仅次于塞舌尔,赤道几内亚和加蓬.这主要是由于其庞大的石油储量和低人口.[10] [11] 利比亚拥有世界上任何一个国家的第十大探明石油储量,也是第17大石油产量.

...

...我想允许每个句子都是可突出的,这样当一个人点击句子中的某个地方时,句子就会突出显示(句子在被读入${text}变量时已经分开了,所以我可以${text}如果有必要,让我们成为一个句子数组.

这是大文本中突出显示的句子应如下所示:

利比亚面积近1,800,000平方公里(700,000平方英里),是非洲面积第四大的国家,也是世界第17大国.[9] The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people.该国的三个传统地区是Tripolitania,Fezzan和Cyrenaica.截至2009年,利比亚的非洲人类发展指数最高,非洲人均国内生产总值(PPP)排名第四,仅次于塞舌尔,赤道几内亚和加蓬.这主要是由于其庞大的石油储量和低人口.[10] [11] 利比亚拥有世界上任何一个国家的第十大探明石油储量,也是第17大石油产量.

---

应该存储突出显示的句子,以便我能够检索该人点击的突出显示的句子.

我认为这个问题需要来自jQuery和各种变量容器的.select()来排序突出显示的句子.如果您对我如何解决这个问题有任何建议,我将非常感激,因为我坚持使用哪些方法和工具.谢谢.=)

Answer 1

将每个句子放在span标签中.例:

<div class="text">
<span>With an area of almost 1,800,000 square kilometres (700,000 sq mi), Libya is the fourth largest country in Africa by area, and the 17th largest in the world.[9]</span>
<span>The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people.</span>
</div>

然后你可以捕获点击并在跨度上设置一个类:

$('.text span').click(function(){ $(this).toggleClass('selected') });

使用CSS样式使选定的跨度显示不同:

.text .selected { background: #ff9; }

要获取所选的句子,只需获取具有该类的span元素:

var sentences = $('.text .selected');

演示:http://jsfiddle.net/86FXr/