Question

我有15个具有相同类但不同ID的div，我想更改值的颜色。

例如，如果一个或五个div的值小于15，则该值的颜色将为红色，如果三个或一个值的值最多为15但在45以下，则该值的颜色为绿色如果div的值最多为45，颜色将为黄色，但我想同时看到所有颜色。

我的div是这样的：

<div id="listado">
  <div id="cuautitlan" class="dfedo">15</div>
  <div id="coacalco" class="dfedo">54</div>
  <div id="atizapan" class="dfedo">65</div>
  <div id="tlalne" class="dfedo">2</div>
  <div id="tlalne2" class="dfedo">5</div>
  <div id="naucalpan" class="dfedo">90</div>
  <div id="neza" class="dfedo">105</div>
  <div id="huixqui" class="dfedo">65</div>
  <div id="azca" class="dfedo">75</div>
  <div id="gustavo" class="dfedo">45</div>
  <div id="miguel" class="dfedo">35</div>
  <div id="cuauh" class="dfedo">2</div>
  <div id="venus" class="dfedo">1</div>
  <div id="coaji" class="dfedo">58</div>
  <div id="alvaro" class="dfedo">5</div>
  <div id="benito" class="dfedo">95</div>
  <div id="izta" class="dfedo">43</div>
  <div id="magda" class="dfedo">35</div>
  <div id="coyoacan" class="dfedo">33</div>
  <div id="iztapa" class="dfedo">65</div>
  <div id="tlalpan" class="dfedo">89</div>
  <div id="xochi" class="dfedo">99</div>
  <div id="tlahuac" class="dfedo">9</div>
  <div id="milpa" class="dfedo">0</div>
</div>

我的jquery就像这样

$("div.dfedo").each(function()
                  {
                    $(this).value < 15 ? $(this).css('color','red');
                  });

我的fiddle

Answer 1

制作这个jQuery插件：

$.fn.colorize = function () {
   return this.each(function() {
      var $this = $(this), number = $this.text();
      $this.css({color: number < 15 ? "red"
                      : number < 45 ? "green"
                      : "yellow"});
   });
};

然后跑：

$("div.dfedo").colorize();

请参阅DEMO。

为这样的事情制作一个jQuery插件是一个好习惯。这样你就可以轻松地重用你的代码并做一些有趣的事情：

$("div.dfedo").hide().colorize().show("slow");

通过创建一个简单的插件，你基本上可以创建一个新的jQuery命令来完成你想要的任务。

Answer 2

您的问题出在Conditional (ternary) Operator：

上

＆＃13;

$('div.dfedo').each(function() {
    var $elem = $(this),
        val = $elem.html(),
        color = (val < 15) 
            ? 'red' 
            : (val >= 15 && val < 45) 
                ? 'green' 
                : 'yellow';
  
    $elem.css('color', color);
});

＆＃13;

.dfedo {
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listado>    
    <div id="cuautitlan" class="dfedo">15</div>
    <div id="coacalco" class="dfedo">54</div>
    <div id="atizapan" class="dfedo">65</div>
    <div id="tlalne" class="dfedo">2</div>
    <div id="tlalne2" class="dfedo">5</div>
    <div id="naucalpan" class="dfedo">90</div>
    <div id="neza" class="dfedo">105</div>
    <div id="huixqui" class="dfedo">65</div>
    <div id="azca" class="dfedo">75</div>
    <div id="gustavo" class="dfedo">45</div>
    <div id="miguel" class="dfedo">35</div>
    <div id="cuauh" class="dfedo">2</div>
    <div id="venus" class="dfedo">1</div>
    <div id="coaji" class="dfedo">58</div>
    <div id="alvaro" class="dfedo">5</div>
    <div id="benito" class="dfedo">95</div>
    <div id="izta" class="dfedo">43</div>
    <div id="magda" class="dfedo">35</div>
    <div id="coyoacan" class="dfedo">33</div>
    <div id="iztapa" class="dfedo">65</div>
    <div id="tlalpan" class="dfedo">89</div>
    <div id="xochi" class="dfedo">99</div>
    <div id="tlahuac" class="dfedo">9</div>
    <div id="milpa" class="dfedo">0</div>
</div>

＆＃13;

Answer 3

请查看演示： https://jsfiddle.net/pj4c40qq/1/

$("div.dfedo").each(function() {
  $(this).html() < 15 ? $(this).css('color', 'red') : null;

  ($(this).html() >= 15 && $(this).html() < 45) ? $(this).css('color', 'green'): null;

  $(this).html() >= 45 ? $(this).css('color', 'yellow') : null;
});

根据数值jquery更改div的颜色

3 个答案: