javascript - 表格中的多个闪烁文本

Question

我在互联网上找到的这个 javascript。在我的表格中，我只能让第一个文本框闪烁，下次我想要另一个文本框闪烁时它不起作用。我是初学者，谢谢你的支持。

我在 javascript 中尝试了第二个变量，我还复制了具有不同 ID 的 javascript。还是没有运气...

在我放置的头部：

 <script language="javascript">
function blinktext() {
  var f = document.getElementById('announcement');
  setInterval(function() {
    f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
  }, 500);
}
</script>

在html中我使用：

<div id="announcement" class="rTableCell">
<span style="color: #99cc00;">groen</span></div>

我希望我的桌子上有多个盒子闪烁我的桌子在这里：https ://zappi.info/faq-howto/hub/42-led-referentie-tabel

标签： javascript

Answer 1

使用querySelectorAll和classList.toggle

另请注意，我们添加了一个 CSS 类来隐藏元素。如果toggle不存在，则调用将添加，如果存在，则删除。

function blinktext() {
  document.querySelectorAll('.announcement').forEach(e =>{
  setInterval(() => {
    console.log(e);
    e.classList.toggle('hide');
  }, 500);
  });
}

// We use an event listener to only run our code once the HTML is 
// loaded and ready to be read.
document.addEventListener('DOMContentLoaded', () => {
  blinktext();
});

.hide {
visibility: hidden;
}

<div class="announcement rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="announcement rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="announcement rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="announcement rTableCell">
  <span style="color: #99cc00;">groen</span></div>

<div class="announcement rTableCell">
  <span style="color: #99cc00;">groen</span></div>