在javascript中突出显示文本按钮
使用 Vader 情感分析工具进行 NLP，我正在开发一个基本界面，以在文本中显示面向意见的单词。
我得到了 HTML 格式的输出，我想要一个按钮来切换文档中这些单词的高亮显示（由span标记指出。我试图遵循这篇文章的工作，但脚本不适用于此代码。
有什么办法可以让它工作吗？
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回答
-
宝慕林4294392
为要突出显示的所有元素添加一个类并对其进行迭代。在我的示例中，我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>以这种方式调整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/ -
烙印99
这是工作代码，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如果对你有帮助就点个赞
随时随地看视频慕课网APP
相关分类
JavaScript