gpt4 book ai didi

javascript - 根据 div 内的文本更改 div 背景颜色

转载 作者:太空宇宙 更新时间:2023-11-03 21:10:48 24 4
gpt4 key购买 nike

关于 this site我在每张库存图片上都有一个“状态标签”(柴油、汽车、手动等)。我希望根据 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) ,但似乎无法让它在我的网站上运行。任何帮助将不胜感激。

最佳答案

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

这是一个可运行示例中的场景,可以为您提供所需的内容。就像其他人所说的那样,您的 switch case 需要与文本匹配(您正在使用 toLowerCase() 但仍在尝试将其与带有大写字母的文本进行比较,例如“Diesel”和“AUTO”)。而且,如果您有多个 .image-container>.status-tag ,您将在原始文本变量中取回所有文本的字符串。在我发布的示例中,您将从 $('.image-container>.status-tag').text().toLowerCase() 获得 dieselautobleh,这就是您仍然获得默认颜色的原因,

因此,我使用了 a.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
});
});

进一步观察,我告诉您的 complete 可能有效,但 .done 可能更适合处理(不要同时输入 complete 和 .done)。

关于javascript - 根据 div 内的文本更改 div 背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47190763/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com