Question

我使用perl，mysql和JS / Jquery动态创建html ...页面的基本结构是在perl循环中创建的，用于打印多个重复行 - 其实质是：

print "<div id='eventList'>";
print-loop {
   <div class="eventRow">
      <div class="eventHiddenType">$typeid</div>
      <div class="colE1">$datestring</div>
      <div class="colE2">$venue</div>
      <div class="colE3">$title</div>
   </div>
}
print '</div>'

在运行时正确地从DB中提取$ vars。

存储在隐藏div中的$ typeid供以后在JS中使用（见下文）

CSS是：

#eventList { width:900px; height: 454px; overflow-x:hidden; overflow-y:scroll; }
.eventRow { overflow: auto; height: 58px; }
.eventHiddenType { float:left; display:none; padding: 0px; margin: 0px; }  
.colE1 { float: left; width: 165px; color: #000; }
.colE2 { float: left; width: 290px; color: #000; }
.colE3 { float: left; width: 395px; color: #000; }

.EvDiv0 { background-color: #000000 !important; }   // Type 1
.EvDiv1 { background-color: #C6FFED !important; }   // Type 2
.EvDiv2 { background-color: #B3CCFF !important; }   // Type 3
.EvDiv3 { background-color: #DAB0FF !important; }   // Type 4

通过从Jquery通过$ .ajax调用perl来编写html（使用async：false）

然后我用：

对行进行条带化

$(".eventRow:even").css('background-color', '#f3f3f3');

......它应该按原样运作。

问题在于我尝试使用.addClass（）根据存储在隐藏div中的值更改每行中第一个单元格的背景颜色，其类为.eventHiddenType：

$('.eventRow').each( function() {
   var hid = 'EvDiv' + $(this).children('.eventHiddenType').text();  
   $(this).children('.colE1').addClass(hid);
});

源已正确更改为

<div class="colE1 EvDiv3">blah blah blah</div>

...对于每一行......即添加了正确的“EvDivX”类（根据X =隐藏类型）

但是背景在浏览器中并没有这样呈现 - 它就像条纹一直一样。

我甚至尝试在课堂上添加一个'！important'，认为它会强制通过，但它没有...

我知道还有其他几种方法可以达到我想要的效果，但是我不明白为什么这个不起作用。

查看实际操作：http://jsfiddle.net/Upland/2KBPU/1/

有什么想法吗？

Answer 1

问题是你的CSS中有无效的注释标记，这导致了CSS解释问题。 //无效，但/* ... */是。正如我在上面的评论中所指出的那样，你还会生成一个类EvDiv4，它似乎没有被定义。

<强> Updated jsFiddle example

jquery addclass正在添加一个类，但它没有显示

1 个答案: