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