根据div中的文本更改div背景颜色 [英] Change div background color based on text inside div
问题描述
在此网站上，我有一个状态标记"(柴油，自动，手动等)在每个库存图片上.我希望根据DIV中的文本更改该标签的背景颜色.
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 DIV.
这是我到目前为止的代码:
This is the code that I have so far:
<script>
$(function() {
var text = $('.image-container>.status-tag').text().toLowerCase(), color;
switch (text) {
case 'Diesel':
color = '#ff0000';
break;
case 'AUTO':
color = '#6dc8bf';
break;
default:
color = '#39d52d';
}
$('.image-container>.status-tag').css('background', color);
});
</script>
显示默认颜色，但由于某种原因，我无法基于div内的文本显示指定的颜色.
The default color is showing up, but for some reason, I cannot get the specified color to show based on the text inside the div.
这不是我自己的代码，我在另一个线程上找到了它(此处为原始代码) ，但似乎无法使其在我的网站上正常工作.任何帮助将不胜感激.
This is not my own code, I found it on another thread(original code here), but can't seem to get it to work on my site. any help would be appreciated.
推荐答案
$(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>
这是一个可运行示例中的场景，该示例提供了您所追求的目标.就像其他人说的那样，您的切换用例需要匹配文本(您使用的是toLowerCase()，但仍尝试将其与带有大写字母(例如"Diesel"和"AUTO")的文本进行比较).但是，如果您有多个.image-container> .status-tag，您将获得原始文本变量中所有文本的字符串.在我发布的示例中，您会从$('.image-container>.status-tag').text().toLowerCase()中获得柴油汽车的亮度，这就是为什么您仍获得默认颜色的原因，
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,
因此，我使用了.each(function(){});.可以单独处理每个图像容器.
Therefore, I used a a .each(function(){}); on it to deal with each image container on its own.
编辑有关在ajax调用后未应用的样式的注释:
Edit for comments about style not applied after ajax call:
尝试一下:
$.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
});
});
从更进一步的角度来看，我告诉您的完整版可能有效，但是.done可能会更好(不要同时输入完整版和.done).
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).
这篇关于根据div中的文本更改div背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
