Javascript 基于div标记内部文本的条件类_Javascript_Jquery_Html_Css

Javascript 基于div标记内部文本的条件类

javascript jquery html css

Javascript 基于div标记内部文本的条件类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个div，它根据我在WP中创建的自定义post类型中添加的I word打印状态，我想根据div的内容文本添加一个.class，我发现它改变了样式（背景色）但是我想知道是否可以更改.class而不是像示例中那样只更改背景颜色的样式属性下面是其中的示例代码： $(function() { //var text = $('.image-container>.status-tag').text().toLowerCase(), color; $('.image-co

我有一个div，它根据我在WP中创建的自定义post类型中添加的I word打印状态，我想根据div的内容文本添加一个.class，我发现它改变了样式（背景色）但是我想知道是否可以更改.class而不是像示例中那样只更改背景颜色的样式属性

下面是其中的示例代码：

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

HTML


柴油机
自动的
呜呜

默认情况下，“status”一词包括这个类“pt-cv-ctf-value”，所以我想应该将它与这个类一起添加

这是我最接近的解决方案，但我不知道如何在我的案例中实现它

提前谢谢

您当然可以将这些类移动到CSS类中，然后使用将这些类附加到相应的元素中

因此，在下面的示例中，我不是使用

.css（）

来指定

背景色，而是使用.addClass（）
方法来指定类。请注意，您也可以使用自定义数据-
属性而不是类来实现上述功能，但这只是选择的问题
还要注意，我使用的是background
，因此它将覆盖您设置的任何背景图像
或背景颜色
，因为它是一个缩写。如果需要，可以显式使用这些属性
进一步扩展我对以下代码的解释，我对这些代码进行了一些重构。在这里，我创建了一个简单的对象来代替使用类
名称映射单词，而不是使用开关大小写
，当您开始添加更多项目时，它可能会变得丑陋。稍后，我将使用一个三元运算符，并使用这些单词作为对象键，该键稍后将返回所需的类
。如果密钥不存在，我假设它是默认值


$（函数（）{
变量映射标记={
柴油机：“标签红色”，
自动：“标记青色”，
未分类：“绿色标签”
};
$（'.image container>.status tag'）。每个（函数（）{
var elm=$（this），t=elm.text（）.toLowerCase（）；
elm.addClass（mapTags[t]？mapTags[t]：mapTags.uncategorized）；
});
});
。标记为绿色{
背景#39d52d；
}
.标签红{
背景：#ff0000；
}
.标签青色{
背景：#6dc8bf；
}
.状态标签{
高度：50px；
宽度：50px；
边缘顶部：10px；
边缘底部：10px；
}

柴油机
自动的
呜呜
您可以使用addClass在元素上添加类。
试试下面的代码

$（函数（）{
//var text=$（'.image container>.status tag'）.text（）.toLowerCase（），颜色；
$（'.image container>.status tag'）。每个（函数（）{
console.log（$（this.text（））；
var text=$（this.text（）.toLowerCase（）；
开关（文本）{
“柴油机”案例：
className='柴油颜色'；
打破
“自动”案例：
className='自动颜色'；
打破
违约：
className='默认颜色'；
}
$（this）.addClass（className）；
});
});
。柴油机颜色{
背景色：#ff0000；
}
.自动配色{
背景色：#6dc8bf；
}
.默认颜色{
背景色：#39d52d；
}

柴油机
自动的
呜呜
您需要使用addClass
jquery方法

$（函数（）{
//var text=$（'.image container>.status tag'）.text（）.toLowerCase（），颜色；
$（'.image container>.status tag'）。每个（函数（）{
console.log（$（this.text（））；
var text=$（this.text（）.toLowerCase（）；
开关（文本）{
“柴油机”案例：
className='diesel'；
打破
“自动”案例：
className='auto'；
打破
违约：
className='defaultClass'；
}
$（this）.addClass（className）；
});
});
.diesel{
背景颜色：蓝色；
}
.自动{
背景：红色；
}
.defaultClass{
背景#39d52d；
}

柴油机
自动的
呜呜
感谢您的解释，每个人都建议使用addClass，但我接受您的解释，因为它有一个扩展的解释，有助于像这样的noob：）
<!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>