使用jQuery將多個樣式添加到相同的文本

我的網頁的每一個單詞都有腳註，用戶將點擊單詞/短語來查看腳註。然而，一些腳註重疊，即腳註1可能適用於當前單詞，而腳註2適用於整個短語，其開頭爲與當前單詞。使用jQuery將多個樣式添加到相同的文本

既然我們生活在未來，當用戶在一個詞上懸停時，我想指出所有相關腳註的範圍。例如：

enter image description here

我的背景是HTML/CSS/JS和我很舒服使用CSS，使所有的堆疊看起來不錯。 這是我自己弄不清的HTML本身，你們有沒有想過如何將這些SPAN堆疊在一起？

理想情況下，原始輸入不應該有一百萬SPANs全部用於標記......我想JS應該根據該單詞在段落中的位置插入跨度。因此，在上面的例子中，當您將鼠標懸停在單詞「score」上時，JS會插入從單詞2開始的單詞跨度（「分數」），從單詞1開始的四個單詞跨度（「四」從第1個字開始的六個字的跨度（「四」）。如果這是最好的方法，我怎麼能告訴jQuery的懸停來計算單詞來回計數和添加標籤？

來源

2014-05-21 Heraldmonkey

能否請您上傳您的HTML代碼 –

這不是在HTML呢。我正在試圖規劃最好的解決方案。 – Heraldmonkey

您正在考慮識別單詞/短語的HTML/CSS方法，這是合理的。但另一種方法是將每個單詞作爲數組的一部分，然後爲數組中的每個成員分配查找值。單個查找值將導致關於單詞的信息，而關於多個單詞的另一個查找值將導致識別短語。 – TimSPQR

您描述的問題很有趣，但實際上相當複雜，所以我只會逐個提出您的問題。

這是我自己弄不清的HTML本身，你們有沒有想過如何將這些SPAN堆疊在一起？對父母的頂部

跨度是其他跨度的孩子將自動Z-索引，以便在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上時，你可以獲得元素內容的文本以及有關鼠標位置的各種信息。

因爲每個瀏覽器和每個操作系統都會以不同的方式呈現文本，所以嘗試計算單詞的邊界框並沒有什麼意義，更不用說非等寬字體每個字符的寬度不同。

理論上，可以使用地圖組合並可能觸發點擊（通過選擇API）來找出哪個單詞在您的光標下，但它可能不會很好地與您的用戶界面。祝你好運！

來源

2014-05-21 11:34:08

從昨天起我就一直在研究這個概念，並且能夠拿出一個初步的工作小提琴 - FIDDLE。

的總體思想是：

把所有的字和相關聯的描述符中的陣列。
動態顯示單詞。
將動態顯示的隱藏數據與每個單詞相關聯。
當您將鼠標懸停在某個單詞上時，相關數據（許多不同級別的描述符）將顯示在您希望顯示的任何位置。

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(''); 
});

來源

2014-05-23 04:04:53 TimSPQR

使用jQuery將多個樣式添加到相同的文本

回答

相關問題