Question

我基本上有这个标记来自我的JSP。我在每一行中添加了类，我希望每行都有一个闪烁的效果。

<table>
 <tbody>
  <tr class="blinkYellow">
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
  <tr>
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
  <tr class="blinkYellow">
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
 </tbody>
</table>

我设置了一个Jquery函数和一个如下所示的计时器。但我目前不确定为什么桌子的背景颜色没有改变。

$(document).ready(function(){
 setInterval(findYellow,1000);    
 function findYellow(){
  $("tr.blinkYellow").each(function(){
   if($(this).attr("background-color") == "yellow"){
    $(this).attr("background-color", "white")
   }else{
    $(this).attr("background-color", "yellow")
   }
  })
 }
});

我查看了Firebug HTML标签，我注意到所选元素行的背景颜色确实在变化。

但我不确定为什么行的背景颜色不是从黄色和白色切换它的颜色。

Answer 1

使用css类添加颜色不是更好。如果这样做，您可以按如下方式使用jquery：

$(this).toggleClass("blink-yellow");

编辑：

您可以使用此页面试用这些内容...... http://jsfiddle.net/rgkQK/3/

$(document).ready(function(){ 
 setInterval(findYellow,1000);     
 function findYellow(){ 
  $("tr.blinkYellow").each(function(){ 
       $(this).toggleClass("background-color-yellow");
     })
    }
});

在小提琴中看起来它会很好用; - ）

Answer 2

attr函数将添加/更改属性。使用css功能代替attr功能。

$(document).ready(function(){
 setInterval(findYellow,1000);    
 function findYellow(){
  $("tr.blinkYellow").each(function(){
   var $this = $(this);
   if($this.css("background-color") == "yellow"){
    $this.css("background-color", "white")
   }else{
    $this.css("background-color", "yellow")
   }
  })
 }
});

另一种选择是为包含blinkYellow黄色的background-color类设置css样式，然后切换它：

var $blinkYellow = $("tr.blinkYellow");
$(document).ready(function(){
  setInterval(findYellow, 1000);    
  function findYellow() {
    $blinkYellow.each(function() {
      // note: jQuery is not really needed here - instead, you could use the following line
      // this.className = this.className == 'blinkYellow' ? '' : 'blinkYellow';
      $(this).toggleClass('blinkYellow');
    });
  }
});

使用jquery在Timer事件上更改表行背景颜色

2 个答案: