javascript – 点击时如何突出显示一个句子？

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

…

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] The capital,Tripoli,
is home to 1.7 million of Libya’s 6.4
million people. The three Traditional
parts of the country are Tripolitania,
Fezzan,and Cyrenaica. Libya has the
highest HDI in Africa and the fourth
highest GDP (PPP) per capita in Africa
as of 2009,behind Seychelles,
Equatorial Guinea and Gabon. These are
largely due to its large petroleum
reserves and low population.[10][11]
Libya has the 10th-largest proven oil
reserves of any country in the world
and the 17th-highest petroleum
production.

…

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

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

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

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

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

解决方法

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

<div class="text">
<span>With an area of almost 1,000 square kilometres (700,Libya is the fourth largest country in Africa by area,and the 17th largest in the world.[9]</span>
<span>The capital,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/