突出显示 javascript 中的文本按钮
[英]Highlight text button in javascript
问题描述
Doing NLP using the Vader sentiment analysis tool, I'm working on a basic interface to show opinion oriented words in a text.
使用 Vader 情绪分析工具做 NLP，我正在开发一个基本界面，以在文本中显示面向意见的单词。
I got the output in HTML and I would like a button to toggle the highlight of those words in the document (noted by the span tag. I tried to follow the work of this post but the script doesn't work for this code.我在 HTML 中获得了 output 并且我想要一个按钮来切换文档中这些单词的突出显示（由span标签指出。我试图遵循这篇文章的工作，但脚本不适用于此代码。
Is there any way I could make it work?有什么办法可以让它工作吗？
document.getElementById("button").addEventListener("click", function() { [].forEach.call(document.querySelectorAll("td"), td => { p.classList.toggle("highlight"); }); this.innerHTML = (this.innerHTML === "Highlight")? "Unhighlight": "Highlight"; })
.blue_1 { background-color:#a5c7fd; }.blue_2 { background-color:#8ab7ff; }.blue_3 { background-color:#609bfa; }.blue_4 { background-color:#3682fc; }.blue_5 { background-color:#136cfc; }.red_1 { background-color:#fca8a8; }.red_2 { background-color:#fa7e7e; }.red_3 { background-color:#fa5e5e; }.red_4 { background-color:#f83c3c; }.red_5 { background-color:#fc1313; }
<body> <table style="width:80%" border ="1"> <tr> <td width="70%"> The book is <span class="blue_3">smart,</span> <span class="blue_5">handsome,</span> and <span class="blue_4">funny.</span> <br> The book is <span class="red_3">terrible <br></span> The book was <span class="blue_1">good., </span> <br> Today <span class="red_4">SUX</span>,, <br> Today only kinda <span class="red_4">sux,</span> <br> But I'll get by, <span class="blue_3">lol,</span> <br> </td> <td> <button id="button">Highlight</button> </td> </tr> </table> </body>
2 个解决方案
解决方案1
1 2019-11-22 11:05:46
Here is working code,这是工作代码，
document.getElementById("button").addEventListener("click", function() {
[].forEach.call(document.querySelectorAll("span"), p => {
p.classList.toggle("highlight");
});
this.innerHTML = (this.innerHTML === "Highlight") ? "Unhighlight" : "Highlight";
})
https://codepen.io/pgurav/pen/eYYovmN https://codepen.io/pgurav/pen/eYYovmN
Upvote if it helps you如果对你有帮助就点个赞
解决方案2
1 2019-11-22 11:13:10
Add a class for all elements you want to highlight and iterate over them.为所有要突出显示和迭代的元素添加 class。 In my example I've added class word to all spans:在我的示例中，我已将 class word添加到所有跨度：
<table style="width:80%" border ="1">
<tr>
<td width="70%">
The book is
<span class="word blue_3">smart,</span>
<span class="word blue_5">handsome,</span> and <span class="word blue_4">funny.</span><br>
The book is <span class="word red_3">terrible <br></span>
The book was <span class="word blue_1">good., </span> <br>
Today <span class="word red_4">SUX</span>!, <br>
Today only kinda <span class="word red_4">sux!</span> <br>
But I'll get by, <span class="word blue_3">lol,</span> <br>
</td>
<td>
<button id="button">Highlight</button>
</td>
</tr>
</table>
adjusted JS this way:以这种方式调整JS：
document.getElementById("button").addEventListener("click", function() {
Array.from(document.getElementsByClassName('word')).forEach(
span => span.classList.toggle("highlight")
);
this.innerHTML = (this.innerHTML === "Highlight") ? "Unhighlight" : "Highlight";
})
https://jsfiddle.net/9gdqunfo/ https://jsfiddle.net/9gdqunfo/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.