Question

我有一个javascript函数，它使指定的文本在2种颜色，灰色和我运行函数时设置的颜色值之间交替。

这是我使用的代码。功能：

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;

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

然后，对于我做的每个独特的闪光（内容是动态生成）：

     setInterval(function() {
        flashtext('flashingtext1','#ffffff'); 
        }, 500 );

数字flashingtext，flashingtext2增加每一个，并且颜色设置为它将交替的颜色，在本例中为白色。

然后

<span id='flashingtext2'>flash me</span>

有什么方法可以修改整个代码，所以我不必为每个发生的实例添加新的javascript。所以我可以将功能关闭，然后在span标签中定义其余部分？像

这样的东西

<span id=flashingtext data=#ffffff> flash white </span>

我给的颜色总是在它和灰色之间交替

基本上，切掉中间位。

注意：如果提供更简单的方法，也可以使用jquery。

Answer 1

使用jQuery，您只需切换元素上的类，并让每个类设置一种颜色

setTimeout(function() {
$('#flashText').toggleClass('gray');
}, 500);

Answer 2

如果你想要相同的代码应用于所有实例，那么给元素一个公共类，比如说“flashingtext”，这样你就可以选择它们作为一个组，但是用内联样式设置各个颜色：

<span class='flashingtext' style='color: white'>flash me</span>

然后有一个“灰色”类：

span.gray { color : gray !important;}

使用!important，因此它可以覆盖内联样式。

然后你的函数可以选择所有具有“flashingtext”类的元素并打开或关闭“灰色”：

setInterval(function() {
   $(".flashingtext").toggleClass("gray");
}, 500);

演示：http://jsfiddle.net/yenK9/

如果您需要为跨度指定id以便您可以单独选择它们以用于其他目的，那么请继续，但是对于这种颜色您不需要。

缩短javascript / jquery函数

2 个答案: