如何为句子的每个单词获取不同的 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>";}