尝试绑定表td上的单击操作

我正在尝试将单击操作添加到html表的单元格中。

这是我的Javascript：

$(document) .ready( function () { function setColor(cell) { var cssRed = { "color": '#ff0000' } var cssBlue = { "color": '#0000ff' } if (cell.css('color') == '#ff0000') cell.css(cssBlue); else cell.css(cssRed); } $('td').click(function () { setColor($(this)); }); }); 

这是我的HTML

  
 
 
 
Data
 
Data
 
Data
 
 
 
Data
 
Data
 
Data
 
 
 
Data
 
Data
 
Data
 
 
  

应该更改单击的单元格中文本的颜色。 我正在尝试在http://whenisgood.com上制作类似于网格的东西

虽然，由于某种原因，它继续输入if（在setColor方法中）的else语句。 显然，这种比较cell.css('color') == '#ff0000'每次都失败。 我在这做错了什么？

编辑：我发出了cells.css('color')的警告，这里是输出：首先是rgb(11,4,0)

然后点击第二次： rgb(255,0,0)

edit2：起初我尝试将颜色分配为blue和red 。 然而它不起作用（即使我与blue和red比较）。 我猜Javascript不会在Hex或RGB中编组red ，对吗？

编辑3：如果你是downvote，请让我知道为什么，我会尝试更新问题，以便它变得更好。

Answer 1

根据人们的建议，不同的浏览器可能会返回不同的颜色值。

jQuery的css()文档证实了这一点。

不同的浏览器可以返回逻辑上但在文本上不相等的CSS颜色值，例如，＃FFF，＃fffffff和rgb（255,255,255）。

所以我建议依赖CSS类：

CSS

 .red { color: #ff0000; } .blue { color: #0000ff; } 

jQuery的

 $(document) .ready( function() { function setColor(cell){ var shouldSwitch = cell.hasClass("red"); cell.toggleClass("red", !shouldSwitch); cell.toggleClass("blue", shouldSwitch); } $('td').click(function(){ setColor($(this)); }); }); 

这是一个有效的演示。

Answer 2

我假设td的默认颜色是红色。

所以只需将CSS设置为

 td{color:#ff0000;} td.highlight{color:#0000ff;} 

和脚本

 $(document).ready(function () { function setColor(cell) { $(this).toggleClass('highlight'); } $('td').click(setColor); }); 

演示http://jsfiddle.net/zqytM/