javascript：选择段落中的句子

Question

我想创建一个文本注释工具。假设我们有一些文本显示如下图所示，目标效果是：用户点击文本中的某个地方后，将自动选择并突出显示整个句子。

我不知道如何实现这种效果。有人能指出我可以解决这个问题的代码或资源吗？

谢谢！

Answer 1

你走了：

http://jsfiddle.net/r3wt/6gf25/1/

一次切换一个句子，隐藏之前切换句子中的突出显示。

<div class="paragraph">
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdaflasdkfjasdlfjsdafasd Yah Nah. </p>
    <p class="sentence">Blasdfasdah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflslajfdladajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasadsfasdd Yah, NadfasdfasdfaAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasd Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,YaZAHah NAh Nah. </p>
</div>
<script type="text/javascript">
$(function(){
    $('.sentence').click(function(){
        $('.highlight').toggleClass('highlight');
        $(this).toggleClass('highlight');
    });
});
</script>
<style type="text/css">
<!--
.paragraph { width: 95%; padding: 5px; margin: 5px; background: #fff;}
.sentence { width: 100%; display: inline;}
.highlight{ background-color: #FC9A24}
-->
</style>

Answer 2

伪代码（可能确实有效）：

$(".class").click(function () {
    $(this).css("background-color", "#ff0000");
});

并将此类分配给所有p标记

Answer 3

如果每个句子都有一个共同的类（比如说'聊天句'），我们就可以做到，

$('.chat-sentence').click(function() {
    $(this).select(); 
});

适用于所有浏览器的通用fn为here

Answer 4

我很确定你是新手，所以我会解释一些细节：

开始在一分钟或更短时间内启动并运行jQuery：

将其插入到HTML中（最常见的是在头部，但您也可以在最终正文标记之前抛出它）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

然后在jQuery之后放置一个脚本元素。 它会切换你的句子风格。

<script>
  $(function() { 
    $('.sentence').click(function() {
      $(this).toggleClass('sentenceStyle');
    });
  });
</script>

现在您需要应用样式（CSS）

在标记后面放置一个样式元素：

<style>
  .sentenceStyle {
    background-color: red;
    color: white;
    font-size: 14px;
}
</style>

现在你准备好了！如果你感到困惑，这是fiddle。