Question

在this site上我有一个＆＃34;状态标记＆＃34; （柴油，汽车，手动等）每张库存图片。我希望根据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内的文本显示指定的颜色。

这不是我自己的代码，我在另一个帖子(original code here)上找到了它，但似乎无法让它在我的网站上运行。任何帮助将不胜感激。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

以下是您在可运行示例中的方案，它可以为您提供所需的内容。像其他人所说的那样，你的开关盒需要匹配文本（你正在使用toLowerCase（），但仍然试图将它与带有大写字母的文本进行比较，例如＆＃39; Diesel＆＃39; AUTO＆＃39;）。但是，如果您有多个.image-container＆gt; .status-tag，您将获得原始文本变量中所有文本的字符串。在我发布的示例中，您将从$('.image-container>.status-tag').text().toLowerCase()获得dieselautobleh，这就是您仍然获得默认颜色的原因，

因此，我使用了一个.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）。

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; DR：

将脚本移动到body标记的末尾
在状态标志上使用每个
也是小写你的开关语句

您的脚本位于head部分，因此可以在渲染正文之前执行，在这种情况下，它永远不会找到您的元素。所以把它放在身体部分的末端。

你也使用jquery元素选择器，所以你得到一个元素数组，而不是一个元素。你必须检查所有。每个应该做的伎俩，像那样smth（也将你的开关案例与小写相匹配，否则将无法匹配）：

$(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

3 个答案: