使用CSS&amp ;;基于文本内容为div着色jQuery的 [英] Coloring a div based on text content using CSS & jQuery

问题描述

嗨！

在我们的HTML中，我们使用一个名为content的类来标记某些DIV标记。我想根据它们内部的文字改变DIV的颜色。我需要澄清的一点是，这些DIV是以随机方式动态填充的。

我们如何根据文本内容更改这些DIV的颜色。

 <   div     class   = 内容 >  
 <   p  > 高<   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  > 低<   / p  >  
 <   / div  >  
 <   div     class   = 内容 >  
 <   p  >  medium <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  >  critical <   / p  >  
 <   / div  >  
 <   div    类  =  content >  
 <   p  >  high <   / p  >  
 <   / div  >  
 <   div     class   =  content < span class =code-keyword>>  
 <   p  > 低<   / p  < span class = code-keyword>>  
 <   / div  >  
 <   div  < span class =code-attribute>   class   =  content >  
 <   p  >  medium <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  >  critical <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  > ; 高<   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  < span class =code-keyword>>  low <   / p  >  
 <   / div  >  
 <   div     class   = 内容 >  
 <   p  >  medium <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  >  critical <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  > 高<   / p  >  
 <   / div  > ;  
 <   div     class   =  content >  
 <   p  > 低<   / p  < span class =code-keyword>>  
 <   / div  >  
 <   div     class   =  content >  
 <  < span class =code-leadattribute> p  >  medium <   / p  >  
 <  < span class =c ode-leadattribute> / div  >  
 <   div     class   =  content >  
 <   p  >  critical <   / p  >  
 <   / div  >  
 <   div     class   =  content &g t;  
 <   p  > 高<   / p   >  
 <   / div  >  
 <   div     class   =  content  >  
 <   p  > 低<   / p  >  
 <   /格 >  
 <   div     class   =  content >  
 <  < span class =code-leadattribute> p  >  medium <   / p  >  
 <  < span class =code-leadattribute> / div  >  
 <   div     class   =  content >  
 <   p  >  critical <   / p  >  
 <   / div  >  
 <   div    类  =  content  >  
 <   p  > 高<   / p   >  
 <   / div  >  
 <   div     class   =  content  >  
 <   p  >  medium <   / p  >  
 <   / div  >  
 <   div     class   =  content >  
 <   p  > 关键<   / p  >  
 <   / div  >  

  var  content = $（ 。 content p）。text（）; 
 
  if （content ==   high）{
 
 $（ this ）。css（   color，  #ffffff< /跨度>）; 
} 
  if （content ==   low）{
 
 $（ this ）。css（   color，  #ccc ）; 
} 
  if （content ==   critical）{
 
 $（ this ）。css（   color， ＃000 ）; 
} 

提前感谢您的建议！

解决方案

< blockquote>（ .content p）。text（）;

if （content == high）{

（ this ）。css（ color， #ffffff ）;
}
if （content == low）{

（ this ）。css（ color， ＃ CCC）;
}
if （content == critical）{

Hi!
In our HTML we're using a class called content to mark certain DIV tags. I want to change the colour of the DIVs according to the text inside of them. One thing I need to clarify is that these DIVs are populated dynamically in a random fashion.
How can we change the color of these DIVs according to the text content.

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>

var content = $(".content p").text();

    if (content == "high") {

        $(this).css("color", "#ffffff");
    }
   if (content == "low") {

        $(this).css("color", "#ccc");
    }
   if (content == "critical") {

        $(this).css("color", "#000");
    }

Thanks in advance for your advice!

解决方案

(".content p").text(); if (content == "high") {

(this).css("color", "#ffffff"); } if (content == "low") {

(this).css("color", "#ccc"); } if (content == "critical") {

这篇关于使用CSS&amp ;;基于文本内容为div着色jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！