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

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

1 个答案: