JavaScript: выберите предложение в абзаце

Question

JavaScript: выберите предложение в абзаце

Я хочу создать инструмент текстовой аннотации. Предположим, у нас есть некоторые тексты, показанные как на картинке ниже, объективный эффект: после того, как пользователь щелкнет где-то в тексте, все предложение будет автоматически выделено и выделено.

Я понятия не имею, как добиться этого эффекта. Может кто-нибудь подскажет мне коды или ресурсы, которые могут решить эту проблему?

Спасибо!

1

javascript jquery frontend text-segmentation

Источник

user3352464 01 июл '14 в 01:19

4 ответа

Другие вопросы по тегам javascript jquery frontend text-segmentation

user2401804 01 июл '14 в 01:33 2014-07-01 01:33 · Answer 1 · 2014-07-01 01:33

Ну вот:

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>

user3337494 01 июл '14 в 01:22 2014-07-01 01:22 · Answer 2 · 2014-07-01 01:22

Псевдокод (может действительно работать):

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

и назначить этот класс для всех тегов р

1

Источник

user3337494 01 июл '14 в 01:22

user1672655 01 июл '14 в 01:23 2014-07-01 01:23 · Answer 3 · 2014-07-01 01:23

Если каждое из предложений имеет общий класс (скажем, "чат-предложение"), мы можем сделать это,

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

Общий fn, который работает во всех браузерах, приведен здесь

1

Источник

user1672655 01 июл '14 в 01:23

user580325 01 июл '14 в 01:34 2014-07-01 01:34 · Answer 4 · 2014-07-01 01:34

Я уверен, что вы новичок в этом, поэтому я объясню некоторые детали:

Начните запускать jQuery через минуту или меньше:

Вставьте это в ваш HTML (чаще всего в голове, но вы можете бросить его и до тега end body):

<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>

Теперь вы готовы к работе! Вот скрипка на случай, если вы запутаетесь.