Функция Jquery Javascript, простая ошибка, не могу ее найти! - PullRequest
0 голосов
/ 30 мая 2010

Когда моя страница загружается, она вызывает функцию, как показано ниже:

<body onLoad='changeTDNodes()'>

И код, который он вызывает, приведен ниже:

enter code here


<script src='jquery-1.4.2.min.js' type='text/javascript'></script>

<script>

function changeTDNodes() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});

}

У меня правильно настроен класс в CSS .overThreshold { TD {размер шрифта: 72px;} го {размер шрифта: 72px;} }

Но никакие классы не меняются, что происходит?

Спасибо за вашу помощь!

Ниже целая страница:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'             'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Livermore Readerboard</title>
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>

<script>
$(function() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});

</script>
<style type='text/css'>
#InnerRight {
width: 50% !important;
position: relative !important;
float: left !important;
}
#InnerLeft {
width: 49% !important;
position: relative !important;
float: right !important;
}
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
</style>
</head>
<body>
<div id='InnerLeft'>
<table border=1 cellpading=1 cellspacing=0>
<tr align=right>
<td align=left><b>Split/Skill</b></td>
<td align=center><B>CIQ</b></td>
<td align=center><b>EWT</b></td>
<td align=center><b>Agents Staffed</b></td>
<td align=center><b>Avail</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_video</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_tier</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_video</b></td>
<td align=center class='threshold'><B>60</b></td>
<td align=center><b>10:12</b></td>
<td align=center><b>58</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hsi</b></td>
<td align=center class='threshold'><B>34</b></td>
<td align=center><b>18:15</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hn</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>3:48</b></td>
<td align=center><b>3</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_cdv</b></td>
<td align=center class='threshold'><B>6</b></td>
<td align=center><b>14:53</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>CommOps FieldCare</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
</tr>
</table>
</div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 30 мая 2010

Вам было бы намного лучше, если это возможно, использовать id s для ваших элементов, а затем использовать document.getElementById() (или, что еще лучше, использовать Dojo, MooTools или JQuery для упрощения кода).

Итак, ваш HTML выглядит так:

<td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>

Тогда ваш JavaScript будет выглядеть так:

var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];

В JQuery (и других) вы можете легко использовать класс, чтобы определить, какие элементы требуют порогового значения

В этом случае ваш HTML выглядит так:

<td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>

А ваш весь JavaScript выглядит так:

$(function() {
  var threshValue = 10;
  $('.threshold').each(function(index) {
    var thisValue = parseFloat( $('b', this).text() );
    if(thisValue > threshValue) {
      $(this).addClass('overThreshold');
    }
  });
});

В вашем текущем примере в вашем CSS * есть ошибка

Чтобы стилизовать td и th элементы с именем класса, перейдите

td.overThreshold, th.overThreshold {
  background: #F00; /* for example */
}
1 голос
/ 30 мая 2010

Предположительно, вы проходите через функцию applyThresholds, где innerHTML на myvalue недопустим. Работает ли он нормально в Firefox и т. Д.?

Полагаю, сумасшедший код document.getElementsByTagName('B')[36]; просто возвращает неопределенное значение в какой-то момент. Вы должны поместить некоторый код в applyThresholds, чтобы проверить, получаете ли вы недопустимые аргументы. Что-то вроде:

if(myvalue == null || mycell == null) {
   return;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...