JQuery - скрыть () и конфликт addClass - PullRequest
Новая
       31

JQuery - скрыть () и конфликт addClass

0 голосов
/ 17 ноября 2011

У меня возникла проблема с назначением классов, скрытием и отображением td.Вот мой HTML: 

<table id="fundTable">
    <tr> 
         <td class="rentability"> <span class="someClass"> 0.12 </span> </td>
         <td class="absoluteResult">0.66</td>
    </tr>
    <tr> 
         <td class="rentability"> <span class="someClass"> -0.24  </span> </td>
         <td class="absoluteResult">-.45</td>
    </tr>
</table>

Вот мой Javascript (onchange): 

$('#fundTable tr').each(function() {
    formatedAbsoluteResult = 'SOME NUMBER'
    $(this).find('td[class=absoluteResult]').fadeOut(100).html(formatedAbsoluteResult).fadeIn(100)
    if (formatedAbsoluteResult < 0)
        $(this).find('td[class=absoluteResult]').removeClass('green').addClass('red')
    else 
        $(this).find('td[class=absoluteResult]').removeClass('red').addClass('green')
}

Идея состоит в том, чтобы отобразить число зеленым цветом, если оно положительное, назначив соответствующий класс,В красном иначе.Этот код отлично работает, когда я запускаю его один раз при загрузке страницы.Затем td, которые имеют назначенный класс (либо red, либо green), больше не обновляются (onchange), тогда как другие включены: 

$(this).find('td[class=absoluteResult]').fadeOut(100).html(formatedAbsoluteResult).fadeIn(100)

Я не понимаюэто поведение.Любая помощь с благодарностью.

1 Ответ

1 голос
/ 17 ноября 2011

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

Это, похоже, делает то, что вы пытаетесь достичь ( живая демонстрация на jsFiddle ).Не забудьте поменять части, где я импровизировал: 

    $("#testing").keyup(function() {
    $("#fundTable tr").each(function() {
       formattedAbsoluteResult = 
        $(this).find("td.absoluteResult").fadeOut(100, function () {
            if (formattedAbsoluteResult < 0)
            {
                $("#fundTable tr").find("td.absoluteResult").removeClass("green").addClass("red");
            }
            else
            {
                $("#fundTable tr").find("td.absoluteResult").removeClass("red").addClass("green");
            }
        }).html(formattedAbsoluteResult).fadeIn(100);
    });
});

Обратите внимание на используемую функцию обратного вызова, также «keyup» вместо «onchange», но вы можете использовать все, что вам нужно.Надеюсь, это поможет.

...