如何為句子的每個單詞獲取不同的 hover 事件？

Question

我對 JavaScript 非常缺乏經驗，所以可能有一種我不知道的方法，如果有，請告訴我。 我正在嘗試為句子中的每個單詞獲取單獨的 hover 事件。

我目前正在從數組中的網站上顯示句子。

for (i=0; i<sentences.length; i++){
    var sent = sentences[i].sentence_text;
    display_list += "<li class='text_sent'>" + sent + "</li>";
}

我希望能夠為每個句子中的每個單詞設置一個單獨的 hover 事件，因此我將句子拆分為 arrays。

for (i=0; i<sentences.length; i++){
    var sent = sentences[i].sentence_text;
    var text_array = sentence_text.split(" ");
    display_list += "<li class='text_sent'>" + text_array + "</li>";
}

我還沒有超出這一點，因為我不想顯示數組內容。 如果我確實顯示了數組，它會在數組的每個項目之間顯示逗號。 我想要的是讓句子繼續看起來像它被拆分之前的樣子，但每個單詞都可以單獨訪問。

這可能嗎？

如果是這樣，我怎樣才能讓每個單詞都有一個單獨的鼠標懸停事件？ 例如，我怎樣才能使每次您 hover 超過一個單詞時，一個工具提示框會顯示該單詞在句子中的數字？

編輯：為了清楚起見，必須修復代碼。

Answer 1

也許這會幫助你前進

 const statements = [{ glossHand: "this is a test" }, { glossHand: "this is another test" }]; const display_list = statements.map(statement => { return `<li class="text_sent">` + statement.glossHand.split(" ").map((word, i) => `<span class="word" pos="${i + 1}" statement="${statement.glossHand}">${word}</span>`).join(" ") + "</li>"; }); const message = document.getElementById("message"); const words = document.getElementById("words"); words.innerHTML = display_list.join(""); words.querySelectorAll(".word").forEach(word => { word.addEventListener("mouseover", () => { const span = event.target; const pos = span.getAttribute("pos"); const statement = span.getAttribute("statement"); message.innerText = `""${span.innerText}" is the (${pos}) word of "${statement}"`; }); word.addEventListener("mouseout", () => { message.innerText = ""; }); });

 <ul id="words"> </ul> <p> <div id="message"> </div> </p>

Answer 2

你的分詞方法很籠統，如果單詞之間有幾個空格就會失敗。
我建議你改用這個：

sentence_text.trim().split(/\s+/)

只要每個“單詞”都被標簽包圍，您就可以為每個“單詞”使用標題屬性。

在我的示例中，我只是使用了 span 標簽

css 是另外的，我把 function (IIEF) 允許對初始文本進行轉換

 (function() { let count = 0 document.querySelectorAll('article p').forEach(paragraph=> { let wordsArray = paragraph.textContent.trim().split(/\s+/) // separate words.map(w=>`<span title="${++count}">${w}</span>`) paragraph.innerHTML = wordsArray.join(' ') }) } )()

 article p span { cursor: help; } article p span:hover { background-color: yellow; }

 <article> <p>I haven't gotten beyond this point because I don't want to display the array contents. If I do display the array it displays commas between each item of the array. What I want is for the sentence to continue looking like it did before it was split, but for each word to be separately accessible.</p> <p>Is this possible?</p> <p>If so, how can I get each word to have a separate mouse-over event? For example, how can I make it so that every time you hover over a word, a tool-tip box displays what number the word is in the sentence?</p> </article>

您也可以對 css 執行相同操作:before和data屬性：

 (function() { let count = 0 document.querySelectorAll('article p').forEach(paragraph=> { let wordsArray = paragraph.textContent.trim().split(/\s+/) // separate words.map(w=>`<span data-count="${++count}">${w}</span>`) paragraph.innerHTML = wordsArray.join(' ') }) } )()

 article p span { cursor:crosshair; position: relative; } article p span:hover { background-color: yellow; } article p span:hover:before { position: absolute; font-size: .8em; top: 1.6em; border-radius: .8em; content: 'word number is ' attr(data-count); background-color: darkblue; color: whitesmoke; white-space: nowrap; z-index: 1000; padding: .4em.6em; }

 <article> <p>I haven't gotten beyond this point because I don't want to display the array contents. If I do display the array it displays commas between each item of the array. What I want is for the sentence to continue looking like it did before it was split, but for each word to be separately accessible.</p> <p>Is this possible?</p> <p>If so, how can I get each word to have a separate mouse-over event? For example, how can I make it so that every time you hover over a word, a tool-tip box displays what number the word is in the sentence?</p> </article>

Answer 3

當您在 JS 中向字符串添加值時，它也會自動將其轉換為字符串。 數組的默認字符串表示只是用逗號分隔的元素，這就是為什么你得到你所得到的。 為了使每個都不同，您可能需要 map 數組，其語法如下：

[1, 2, 3].map((n) => 2*n)  // gives [2, 4, 6]

如果您使用 map 數組，則可以對其進行格式化以在每個單詞周圍添加 HTML 標簽，例如：

text_array.map((word) => "<span>" + word + "</span>").join(" ")

要使它們每個都有單獨的鼠標懸停事件，您可以直接將其放入您創建的元素中，如下所示：

text_array.map((word, i) =>
    "<span onmouseover='console.log(" + i + ")'>" + word + "</span>"
).join(" ")

或者，您可能希望使用document.createElement以更面向對象的方式創建元素。 然后，您可以使用他們的addEventListener方法向它們添加偵聽器，您的代碼將更容易閱讀。 特別是對於工具提示，您最好遵循明確關注如何制作它們的教程。 Javascript gives you a very clean API to modify html and css, so if you can hardcode it, it's a small step to be able to programmatically do it.

作為旁注，您問題中的代碼不應該工作，因為您從未在循環內定義glossTxt。 另外一點，js 中的大寫方案是小駝峰式，所以 display_list 應該是 displayList。

Answer 4

您可以通過 class 名稱來訪問它們，或者如果您想控制每個單詞，您可以通過為每個單詞添加序列號來實現，然后您可以在鼠標懸停或單擊或任何類似的操作上使用任何事件

for (i=0; i<sentences.length; i++){
var sent = sentences[i].glossHand;
var text_array = glossTxt.split(" ");
display_list += "<li id='"+i+"' class='text_sent'>" + text_array + "</li>";}