Добавление нескольких стилей в один и тот же текст с помощью jQuery

Question

Каждое слово моей веб-страницы содержит сноски, и пользователь будет щелкать по слову/фразе, чтобы просмотреть сноски. Однако некоторые сноски перекрываются, то есть сноска 1 может применяться к текущему слову, тогда как сноска 2 относится ко всей фразе , начинающейся с текущим словом.

Поскольку мы живем в будущем, когда пользователь наводит курсор на слово, я хочу указать диапазон всех соответствующих примечаний (примечаний). Пример:

Мой фон HTML/CSS/JS, и я комфортно, используя CSS, чтобы сделать все, что укладка хорошо выглядеть. Это сам HTML, который я не могу понять, есть ли у кого-нибудь из вас идеи о том, как складывать эти SPAN один поверх другого?

В идеале, исходный вход не должен иметь миллион SPAN на всем протяжении для маркировки ... Я полагаю, что JS должен вставлять промежутки, основанные на позиции слова в параграфе. Поэтому в приведенном выше примере, когда вы наводите курсор на слово «оценка», JS будет вставлять однословный диапазон, начинающийся со слова 2 («оценка»), четырехсловный диапазон, начинающийся с слова 1 («Четыре»), и промежуток из шести слов, начинающийся с слова 1 («Четыре»). Если это лучший метод, Как я могу сказать jQuery, что при наведении на просмотр слов взад и вперед и добавление тегов?

Answer 1

Проблема, которую вы описываете, интересна, но на самом деле довольно сложна для достижения, поэтому я буду просто задавать вопросы один за другим.

Это сам HTML, который я не могу понять, у любого из вас есть идеи, как складывать эти SPAN один поверх другого?

пролетов, которые являются потомки других пролетов, будут автоматически г индексированные на вершине своих родителей, так что HTML может выглядеть следующим образом:

<div class="container"> 
    <span> 
    <span> 
     Four <span>score</span> and seven 
    </span> years ago 
    </span> 
    our fathers... 
</div> 

вы можете просто присвоить ребенок охватывает различные стили в вашем CSS (как вы знаете, добавив для полноты):

.container span {..} 
.container span > span {...} 

Как я могу сказать, что JQuery при наведении курсора мыши считать слова взад и вперед и добавить теги?

Эта часть очень сложная. Когда вы наведете что-то в javascript, вы можете получить текст содержимого элемента и всевозможные сведения о позиции мыши.

Не имеет смысла пытаться вычислить ограничительную рамку слова с каждого браузера, и каждый os будет отображать текст по-разному, не говоря уже о том, что немоноширинные шрифты будут иметь разную ширину для каждого символа.

Теоретически, было бы возможно использовать комбинацию карт и, возможно, вызвать щелчок (через API-интерфейс выбора), чтобы узнать, какое слово было под вашим курсором, но, вероятно, это не сработает с вашим ui. Удачи!

Answer 2

Я работаю над этой концепцией со вчерашнего дня и смог придумать предварительную рабочую скрипку - FIDDLE.

Основная идея заключается в следующем:

1. Поместите все слова и связанных с ними дескрипторов в массиве.

2. Динамически отображать слова.

3. Свяжите скрытые данные с каждым из слов, поскольку они отображаются динамически.

4. Когда вы наводите курсор на слово, соответствующие данные (дескрипторы на разных уровнях) отображаются везде, где вы хотите их отобразить.

JS

var mydata = [ 
       ['four', 'a number', 'four score = 80', 'total of 87 years'], 
       ['score', 'a word', 'four score = 80', 'total of 87 years'], 
       ['and', 'a word', '', 'total of 87 years'], 
       ['seven', 'a number', '', 'total of 87 years'], 
       ['years', 'a word', '', 'total of 87 years'], 
       ['ago', 'a word', 'ago = in the past', ''] 
       ]; 

for(var v=0; v<6; v++) 
    { 
    $('.holder').append("<div class='num" + v + "'>" + mydata[v][0] + '-' + " </div>"); 
    $(".num" + v).data('dataval1', mydata[v][1]); 
    $(".num" + v).data('dataval2', mydata[v][2]); 
    $(".num" + v).data('dataval3', mydata[v][3]); 
    } 

$('.holder div').on('mouseenter', function(){ 
    $('.putmehere').html(
         $(this).data('dataval1') + "<br />" + 
         $(this).data('dataval2') + "<br />" + 
         $(this).data('dataval3') + "<br />" 
); 
}); 
$('.holder div').on('mouseleave', function(){ 
    $('.putmehere').html(''); 
});