如果滿足條件，如何更改 div 中每個 p 的顏色？

Question

如何更改特定的背景顏色

<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>

當其employee.managerId 大於19 時。數據從我的數據庫加載。 這是我嘗試過的，但不起作用

 $.each(employees, function(index, employee) { var SeatsLeft = 20 - employee.managerId; $('#employeeList').append('<li>' + '<img src="js/citybus.png" class="list-icon"/>' + '<p class="line1">' + employee.firstName + '</p>' + '<p class="line2">' + difference + '</p>' + '<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>' + '<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' + '<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>'); var x = document.getElementsByClassName("line3"); var i; for (i = 0; i < x.length; i++) { if (employee.managerId > 19) { x[i].style.color = "red"; } } });

Answer 1

$.each(employees, function(index, employee) {
  var SeatsLeft = 20 - employee.managerId;
  var color = employee.managerId > 19 ? 'red' : 'green';

  $('#employeeList').append('<li>' +
    '<img src="js/citybus.png" class="list-icon"/>' +
    '<p class="line1">' + employee.firstName + '</p>' +
    '<p class="line2">' + difference + '</p>' +
    '<p class="line3" style=' "color:' + color + ';margin-left:60px">' + SeatsLeft + ' seats left </p>' +
    '<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' +
    '<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');    

});

Answer 2

也許你的意思是

if (SeatsLeft === 0) $(".line3").css("color","red");

或者

'<p class="line3" style="color:'+(SeatsLeft===0?"red":"green")+';margin-left:60px">' 
+ SeatsLeft + ' seat'+(SeatsLeft===1?"":"s")+' left </p>'