divの数値に応じた色を変更jquery

Question

私は同じクラスではあるが異なるIDを持つ15個のdivがあり、値の色を変更したい。

たとえば、1つまたは5つのdivの値が15未満の場合、値の色は赤色になります。3つまたは1つの値が15までですが、45未満では値の色が緑色になり、 divの値は最大45で、色は黄色ですが、同時に見たい色はすべてです。

私のdivの

はこのようなものです： Conditional (ternary) Operatorに

<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

デモを確認してください：

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

そして、ちょうど実行します： 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; 
}); 

Answer 2

あなたの問題のようであるだった：

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

.dfedo { 
 
    background-color: #ccc; 
 
}

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

Answer 3

はこのjQueryプラグインを作成し

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

はDEMOを参照してください。

これらのようなもののためのjQueryプラグインを作るのは良い習慣です。こうすることで簡単にあなたのコードを再利用し、このような興味深い行うことができます：あなたは基本的に何をしたいん新しいjQueryのコマンドを作る単純なプラグインを行うことにより

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

を。