根据div中的文本更改div背景颜色

Question

在此站点上，每个库存图片上都有一个“状态标签”（柴油，自动，手动等）。 我希望根据DIV中的文本更改该标签的背景颜色。

这是我到目前为止的代码：

<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中的文本显示指定的颜色。

这不是我自己的代码，我在另一个线程上找到了它（原始代码在这里），但似乎无法使其在我的网站上正常工作。 任何帮助，将不胜感激。

Answer 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>

这是一个可运行示例的场景，该示例提供了您所追求的目标。 就像其他人说的那样，您的切换用例需要匹配文本（您使用的是toLowerCase（），但仍尝试将其与大写字母（例如“ Diesel”和“ AUTO”）的文本进行比较）。 而且，如果您有多个.image-container> .status-tag，您将获得原始文本变量中所有文本的字符串。 在我发布的示例中，您会从$('.image-container>.status-tag').text().toLowerCase()获得柴油自动调光，这就是为什么您仍获得默认颜色，

因此，我使用了一个.each（function（）{}）; 可以单独处理每个图像容器。

编辑有关在ajax调用后未应用的样式的注释：

尝试这个：

$.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）。

Answer 2

如前所述，现在以答案的形式来说明。 在可变的text定义中，您将文本取为小写（将其改成小写）（在大多数人的书中是个好主意），以便在标记中可以使用大小写字母的任意组合，仍在工作。 但是由于这个原因，您需要在开关中将它们全部显示为小写，以便它们正确匹配（switch语句需要完全匹配才能起作用）。

$(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);
});

Answer 3

TL;博士：

将脚本移到body标签的末尾
在状态标志上使用每个
也将小写您的switch语句

您的脚本位于头部分，因此它可能在渲染正文之前执行，在这种情况下，它将永远找不到您的元素。 因此将其放在正文部分的末尾。

您还可以使用jquery元素选择器，以便获取元素数组，而不是单个元素数组。 您必须全部检查。 每个人都应该做到这一点，就像这样（也可以将您的开关大小写匹配为小写，否则将没有匹配项）：

 $(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); }) });

根据div中的文本更改div背景颜色

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-11-08 22:44:43

解决方案2
1 2017-11-08 22:38:54

解决方案3
0 2017-11-08 22:49:44

根据div中的文本更改div背景颜色

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-11-08 22:44:43

解决方案2 1 2017-11-08 22:38:54

解决方案3 0 2017-11-08 22:49:44

解决方案1
3 已采纳 2017-11-08 22:44:43

解决方案2
1 2017-11-08 22:38:54

解决方案3
0 2017-11-08 22:49:44