jquery addclass добавляет класс, но он не отображается - PullRequest
Новая
       14

jquery addclass добавляет класс, но он не отображается

0 голосов
/ 27 марта 2012

Я создаю html динамически, используя perl, mysql и JS / Jquery ... основная структура страниц создается в цикле 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>'

$ vars правильно извлекаются из БД во время выполнения.

$ typeid, который хранится в скрытом div, предназначен для последующего использования в 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

HTML написанВызов Perl из Jquery через $ .ajax (с 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 = скрытый тип)

Но фон нене отображается как таковой в браузере - это так же, как это было с полосой на всем протяжении.

Я даже пытался добавить «важные» к классу, думая, что это его заставит, но это не так ...

Я знаю, что есть несколько других способов достижения эффекта, который яхочу, но я не понимаю, почему этот не работает.

Видите это в действии: http://jsfiddle.net/Upland/2KBPU/1/

Есть идеи?

1 Ответ

0 голосов
/ 27 марта 2012

Проблема в том, что в вашем CSS есть недопустимые теги комментариев, и это вызывает проблему интерпретации CSS. // недействительно, но /* ... */ является. И, как я отметил в моем комментарии выше, вы также генерируете класс EvDiv4, который, похоже, не определен.

Обновлен пример jsFiddle .

...