Question

我在使用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是紧急的，从后端设置调用，这是我想要闪烁/闪烁的唯一一个。

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

谢谢:)

Answer 1

我运行你的代码，如果用你的php代码（包括括号）代替常量值，它就可以运行。我使用＆＃34; Urdgent＆＃34;，＃bbb和ccc。 ccc会不断闪现。 php一定有问题。

Answer 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 =＆＃34;＆＃34;并将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>

这将归档的是将所有。紧急课程转变为从红色到白色的漂亮褪色。如果您只是想让类消失而不是改变颜色，您也可以使用不透明度。

感谢您的回复。它驱使我找到一个解决方案=）

使用1个ID的多个闪烁文本项？

2 个答案: