Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Change Div Background Color Based On Text Inside Div

Post a Comment
On this site I have a 'status tag' (Diesel, Auto, Manual, etc) on each inventory picture. I want the background color of that tag to be changed based on the text that is within the

Solution 1: 

$(function() {
    //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    $('.image-container>.status-tag').each(function(){
    	console.log($(this).text());
      var text = $(this).text().toLowerCase();
    	switch (text) {
     	case 'diesel':
        color = '#ff0000';
        break;
     	case 'auto':
        color = '#6dc8bf';
        break;
     	default:
        color = '#39d52d';
    	}
    	$(this).css('background', color);
    });
});
<!DOCTYPE html>
<body>
 <div class="image-container">
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Here is your scenario in a runnable example that gives you what you are after. Like others have said, your switch cases need to match the text (you are using toLowerCase() but still trying to compare it with text with capital letters like 'Diesel' and 'AUTO'). But also, if you have multiple .image-container>.status-tag you will get back a string of all text in your original text variable. In the example I posted, you would get dieselautobleh from $('.image-container>.status-tag').text().toLowerCase() which is why you are still getting the default color,

Therefore, I used a a .each(function(){}); on it to deal with each image container on its own.

Edit for comments about style not applied after ajax call:

Try this:

$.ajax({
  //all your ajax stuff
  //This is where complete would go, like:
  complete: function(){
    //do your stuff
  }
}).done(function() {//a done handler to manage when the ajax call is done
  $('.image-container .status-tag').each(function(){
  //do your switch stuff to change color just like before
  });
});

From further looking, the complete I told you might work, but .done might be better to handle that (don't put in both a complete and a .done).


Solution 2:

As commented, now in the form of an answer for clarity. In your variable definition of text you are taking whatever the text is and turning it all lower case (a good idea, in most peoples' books), so that in your markup, you can use any combination of lower and uppercase letters and it will still work. But because of this you need to present them as all lowercase in the switch, in order for them to match properly (switch statements need an exact match to work).

$(function() {
    var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    switch (text) {
     case 'diesel': // change here
        color = '#ff0000';
        break;
     case 'auto': // and change here
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $('.image-container>.status-tag').css('background', color);
});

Solution 3:

tl;dr:

  1. move script to the end of the body tag
  2. use each on status flags
  3. lowercase your switch statements too

Your script lives in the head section, so it may be executed before the body is rendered and in that case it will never find your elements. so put it at the end of the body section.

also you use the jquery element selector so you get back an array of elements, not a single one. you have to check them all. a each should do the trick, smth like that (also match your switch cases to lower case, else there will be no match):

$(function() {
    var textElements = $('.image-container>.status-tag'), color;
    
    textElements.each(function(index, element){
      var text = $(element).text().toLowerCase();

    switch (text) {
         case 'diesel':
            color = '#ff0000';
            break;
         case 'auto':
            color = '#6dc8bf';
            break;
         default:
            color = '#39d52d';
        }
      $(element).css('background', color);
    })
    
    
});

Post a Comment for "Change Div Background Color Based On Text Inside Div"