Как добавить классы к динамически создаваемым элементам?

#javascript #jquery #firebase-realtime-database

#javascript #jquery #firebase-realtime-база данных

Вопрос:

Прежде чем вы скажете, что это дубликат, я уже просмотрел несколько ответов на тот же вопрос, но, похоже, ни один из них не решает мою проблему. У меня есть динамически созданная таблица из firebase. Работает нормально, и все отображается так, как должно, но у меня была идея добавить цвет к тексту в зависимости от того, собираются ли они достичь своей цели. Когда я попытался добавить оператор If / Else, он просто отображает первую таблицу в цвете, а все остальное — белым (это цвет шрифта по умолчанию).

     salesBySold.on('value', function (snapshot) {
  snapshot.forEach(function (childSnapshot) {
    var key = childSnapshot.key;
    var childData = childSnapshot.val();

    let dayDividedByMonth = current_date/days_in_month;
    let tracking_sold_math = childData.cars_sold/dayDividedByMonth;

    if (tracking_sold_math < childData.goal) {
      $('#cars_sold').addClass('red-text');
    } else {
      $('#cars_sold').addClass('green-text')
    };

    $('#salesperson_tbody').append(`
        <tr>
            <td>${childData.name}</td>
            <td id='cars_sold'>${childData.cars_sold}</td>
            <td>${childData.goal}<td>
        </tr>
    `);


  });
});

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

1. кажется, вы пытаетесь добавить класс к элементу, который еще не существует.

2. Да, у меня это было заранее, но, должно быть, я изменил его обратно, поскольку он все еще не работал, поскольку я просто скопировал и вставил свой текущий код для этого вопроса.

Ответ №1:

поскольку вы устанавливаете класс id=»cars_sold» в цикле, это нормально, но это добавит класс ко всем ранее добавленным td, поэтому для решения вы должны сделать это

      salesBySold.on('value', function (snapshot) {
  snapshot.forEach(function (childSnapshot) {
    var key = childSnapshot.key;
    var childData = childSnapshot.val();

    let dayDividedByMonth = current_date/days_in_month;
    let tracking_sold_math = childData.cars_sold/dayDividedByMonth;
    var cls='';
    if (tracking_sold_math < childData.goal) {
      cls='red-text';
    } else {
     cls='green-text';
    };

    $('#salesperson_tbody').append(`
        <tr>
            <td>${childData.name}</td>
            <td id='cars_sold' class="${cls}">${childData.cars_sold}</td>
            <td>${childData.goal}<td>
        </tr>
    `);
  });
});