javascript - 根据数值jquery更改div的颜色

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 命令来执行您想要的操作。