CODEWITHSUNDEEP
javascriptjquery
kunlee
kunlee

Reputation: 641

How do I change the color of each of p in a div if a condition is met?

How can I change the background color of a particular 

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

when its employee.managerId is greater than 19. The data loads from my database. This is what I've tried and it doesn't work 

$.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";
    }
  }

});

Upvotes: 0

Views: 83

Answers (2)

Siri
Siri

Reputation: 1126

$.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>');    

});

Upvotes: 3

mplungjan
mplungjan

Reputation: 178011

Perhaps you meant 

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

or

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

Upvotes: 1

Related Questions