使用 1 个 id 的多个闪烁文本项？答案

【问题标题】：Multiple flashing text items using 1 id?使用 1 个 id 的多个闪烁文本项？
【发布时间】：2014-10-28 04:25:34
【问题描述】：

我在使用 javascript 和 html 时遇到了一点问题。

这是我的脚本

<script type="text/javascript">
function flashtext(Urgent,col) {
var tmpColCheck = document.getElementById('Urgent').style.color;

  if (tmpColCheck === 'silver') {
    document.getElementById('Urgent').style.color = col;
  } else {
    document.getElementById('Urgent').style.color = 'silver';
  }
} 

setInterval(function() {
    flashtext('flashingtext','red');
}, 500 ); //set an interval timer up to repeat the function

这是我的 HTML，

<div class="js-col-md-6 js-col-xs-6" id="<?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

ID 是从后端设置调用的紧急 ID，这是我唯一想要闪烁/闪烁的 ID。

这就是问题所在，它有效 =D yaay！ ...但仅在第一个实例上，所有其他紧急实例都是可靠的。所以我正在寻找的是如何让所有实例闪烁/闪烁而不仅仅是第一个实例？

谢谢:)

【问题讨论】：

不使用 ID，而是考虑为所有实例分配相同的 CSS 类，然后改为修改该类。
我试过了，但是因为样式和文本是在尝试将 css 添加到类时从前端用户选择中调用的，所以它会影响所有实例，即 Low、Medium、High 和 Urgent，因为它们都使用同班。我正在尝试制作闪光灯，这只是紧急情况。是的，你猜对了，这是一个票务支持系统^-^

标签： javascript html flash text blink

【解决方案1】：

我运行你的代码，如果你用你的 php 代码（包括括号）代替常量值，它就可以工作。我使用了“Urdgent”、#bbb 和 ccc。 ccc 将不断闪烁。 php.ini 一定有问题。

【讨论】：

它也适用于我，但仅适用于第一个 id="Urgent" 的文本项，而不是所有具有此 id 的文本项？

【解决方案2】：

没关系，我解决了，为自己感到骄傲.. =)

对于遇到类似问题的其他人，这是如何完成的：

<div class="js-col-md-6 js-col-xs-6" id="<?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

删除 id="" 并将 php 放在类中，如下所示：

<div class="js-col-md-6 js-col-xs-6 <?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

现在给页面添加一个动画样式，我用的是：

<style>
.Urgent {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
from { color: red; }
to { color: white; }
}

@-webkit-keyframes blinker {  
from { color: red; }
to { color: white; }
}

@keyframes blinker {  
from { color: red; }
to { color: white; }
}
</style>

这将归档的内容是将所有 .Urgent 类变成从红色到白色的渐变闪烁。如果您只是希望类消失而不是更改颜色，您也可以使用不透明度。

感谢大家的回复。它驱使我找到解决方案 =)

【讨论】：