0

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

在此处输入图像描述

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

谢谢！

4

4 回答 4

2

干得好：

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>
于 2014-07-01T01:33:21.860 回答
1

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

在一分钟或更短的时间内启动并运行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>

现在你准备好了！这是小提琴，以防您感到困惑。

于 2014-07-01T01:34:25.733 回答
1

伪代码（可能实际工作）：

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

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

于 2014-07-01T01:22:52.857 回答
1

如果每个句子都有一个共同的类（比如'chat-sentence'），我们可以这样做，

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

此处给出了适用于所有浏览器的通用 fn

于 2014-07-01T01:23:16.017 回答