использование addClass / removeClass таблицы td с ajax

Следующий код выводит таблицу со значениями и в соответствии со значением получает макет. Я использую jQuery (Ajax) для обновления информации каждые 10 секунд.

скрипт php, который генерирует требуемые переменные и сохраняет (отображает) их в массиве json (example.php)

$variable1 = 20;

if ($variable1 > 0) {
$td_variable1class="positive";
} else {
$td_variable1class="negative";
}

$array['variable1']      = $variable1;
$array['td_variable1']   = $td_variable1;

echo json_encode($array);

таблица html, в которой переменная извлекается из json, созданного example.php:

<table>
    <tr>
        <td class='variable1class'>
        <div id='variable1'></div>
        </td>
    </tr>
</table>

javascript:

<script type="text/javascript">
   $(function() {
     refresh();
    });

    function refresh() {
         $.getJSON('example.php', function(data) {
            $('div#variable1').html(data.variable1);
            $('td.td_variable1').addClass(data.td_variable1);
       });
    setTimeout("refresh()",10000);
   }

Проблема в том, что "addClass" добавляет класс к существующему классу, в результате чего получается следующий результат:

перед обновлением:

<td class="td_variable1 positive">

после (при условии, что переменная изменилась с положительной на отрицательную):

<td class="td_variable1 positive negative">

Я пытался избежать этого, используя removeclass:

$('td.td_variable1').removeClass().addClass(data.td_variable1);

Но затем фактическое имя класса td удаляется, и мой результат выглядит следующим образом:

<td class="negative">

и это должно выглядеть так:

<td class="td_variable1 negative">

Заранее спасибо за помощь!


javascript jquery ajax addclass removeclass
person Roddeh    schedule 15.10.2014    source источник
comment
Комментарии ниже сбивают с толку. Можете ли вы просто сохранить образец страницы из браузера, чтобы мы могли видеть сгенерированный код и HTML (а не только исходный код)?   -  person Gone Coding    schedule 15.10.2014

Ответы (2)


arrow_upward
0
arrow_downward

Предполагая, что у вас есть только эти 2 варианта, удалите оба (и только эти два), а затем добавьте новый:

$('td.td_variable1').removeClass("positive negative").addClass(data.td_variable1);
person Gone Coding    schedule 15.10.2014
comment
сами классы также являются переменными, поэтому я не могу добавить все эти классы. Я пробовал это: $ ('td.td_variable1'). RemoveClass (data.td_variable1) .addClass (data.td_variable1); но это ничего не делает, оно продолжает добавлять. - person Roddeh; 15.10.2014
comment
@Roddeh: Цель не ясна ... как вы будете различать классы, которые хотите оставить нетронутыми, и те, которые будут изменены? (например, сохранить td_variable1) - person Gone Coding; 15.10.2014
comment
Я просто хочу обновить их и удалить существующий класс. проблема в том, что он продолжает добавлять классы, и я хочу, чтобы они сначала были удалены, а затем заменены. - person Roddeh; 15.10.2014
comment
@Roddeh: В коде непонятно, как вы управляете именами. У вас есть массив / коллекция всех возможных имен классов? - person Gone Coding; 15.10.2014
comment
Боюсь, мне придется удалить их вручную, как вы предложили. Да, это длинный список занятий. Было бы проще, если бы первая часть могла остаться на месте, а только последняя часть была бы удалена, но я думаю, что это невозможно :). Спасибо за помощь! - person Roddeh; 15.10.2014
comment
@Roddeh: вы можете перебирать имена классов коллекции и возможное совпадение по некоторому шаблону, который следует сохранить / удалить, но мне нужно увидеть больше примеров, прежде чем я смогу предложить какой-либо код для этого. - person Gone Coding; 15.10.2014
comment
У меня действительно нет выкройки :) но эй, моя проблема решена. Наверное, не самый эффективный метод и немного грязный, но это нормально :) Все равно спасибо! - person Roddeh; 15.10.2014

arrow_upward
0
arrow_downward

.removeClass() удаляет все классы, если не задан какой-либо параметр. Вместо этого используйте .removeClass("negative").

person devqon    schedule 15.10.2014