如何在单击时更改跨度文本的颜色，并在再次单击时恢复正常？

Question

我有以下代码，我希望当一个数字被点击时——包含在<span>元素中——它应该改变颜色，当它再次被点击时它应该恢复到原来的正常状态。 我已经找到了一些关于改变颜色的在线教程，并放置了一些代码来在点击时改变颜色，但是当它点击时它改变了所有的 colors，而不仅仅是我想改变的元素的颜色。

你能告诉我如何做到这一点，而不用不同的 id 或 class 设置所有跨度，因为我有大约 1000 个这样的跨度。

 spans = document.querySelectorAll(".class"); for (const span of spans) { span.onclick = function() { document.execCommand("copy"); } span.addEventListener("copy", function(event) { event.preventDefault(); if (event.clipboardData) { event.clipboardData.setData("text/plain", span.textContent); console.log(event.clipboardData.getData("text")) } }); }

 body { background-color: black; color: white; font-size: 20px; padding-bottom: 475px; padding-right: 150px; }::selection { background: none } span:active { color: purple }

 <span class="class">444819751</span> <span class="class">444820170</span> <span class="class">444820588</span>

Answer 1

首先，您可以使用 querySelector select 您想要的元素，然后您可以添加一个事件侦听器并像这样获取点击跨度的引用

 document.querySelectorAll('.allowClick span').forEach(occurence => { occurence.addEventListener('click', (e) => { if (e.target.style.color == "red") e.target.style.color = "black" else e.target.style.color = "red" }); });

 <div class="allowClick"> <span>Allow click</span> <span>11111111</span> <span>222222222</span> <span>AAAAAAAAA</span> <span>BBBBBB</span> <span>CCCCCC</span> </div> <br/> <div> <span>Dont allow click</span> <span>11111111</span> <span>222222222</span> <span>AAAAAAAAA</span> <span>BBBBBB</span> <span>CCCCCC</span> </div>

Answer 2

只是很小的变化

 spans = document.querySelectorAll(".class"); for (const span of spans) { span.onclick = function() { document.execCommand("copy"); } span.addEventListener("copy", function(event) { event.preventDefault(); if (event.clipboardData) { event.clipboardData.setData("text/plain", span.textContent); console.log(event.clipboardData.getData("text")) } }); span.addEventListener("click", function(event) { event.preventDefault(); if(span.style.color === 'red'){ span.style.color = 'blue' }else { span.style.color = 'red' } }); }

 body { background-color: black; color: white; font-size: 20px; padding-bottom: 475px; padding-right: 150px; }::selection { background: none } span:active { color: purple }

 <span class="class">444819751</span> <span class="class">444820170</span> <span class="class">444820588</span>

Answer 3

这样的事情应该可以解决问题：

 function changeColor(x) { if (x.style.color == "red") { x.style.color = "black"; } else { x.style.color = "red"; } }

 <span onclick="changeColor(this)">[1]</span> <span onclick="changeColor(this)">[2]</span> <span onclick="changeColor(this)">[3]</span> <span onclick="changeColor(this)">[4]</span> <span onclick="changeColor(this)">[5]</span> <span onclick="changeColor(this)">[6]</span> <span onclick="changeColor(this)">[7]</span> <span onclick="changeColor(this)">[8]</span>