Change Div Background Color Based On Text Inside Div
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><divclass="image-container"><divclass="status-tag"style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div><divclass="status-tag"style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div><divclass="status-tag"style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div></div></body><scriptsrc="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:
- move script to the end of the body tag
- use each on status flags
- 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"