如何向动态创建的元素添加类？

Question

在您说这是重复之前，我已经查看了同一个问题的一些答案，但似乎没有解决我的问题。我有一个动态创建的表来自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>
    `);


  });
});

所以这是我的代码，它只是将彩色文本添加到第一个，但每隔一个仍然是默认颜色。我希望它们都能正确着色

Answer 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>
    `);
  });
});