開關BG的形象，如果情況

我有以下設置高亮：開關BG的形象，如果情況

<style type="text/css"> 
#k-r {font-family:Arial, sans-serif; font-size:14px; font-weight:bold; text-shadow: 1px 1px #fcfcfc;} 
.k-number {display:table-cell; background-image: url('/images/super1.png'); background-repeat: no-repeat; background-position: center; height:30px; width:30px; text-align:center; vertical-align:middle;} 
</style> 
<div id="k-r"> 
<div class="k-number">{NUMBER1}</div> 
<div class="k-number">{NUMBER2}</div> 
<div class="k-number">{NUMBER3}</div> 
<div class="k-number">{NUMBER4}</div> 
<div class="k-number">{NUMBER5}</div> 
<div class="k-number">{NUMBER6}</div> 
<div class="k-number">{NUMBER5}</div> 
<div class="k-number">{NUMBER7}</div> 
<div class="k-number">{NUMBER8}</div> 
<div class="k-number">{NUMBER9}</div> 
<div class="k-number">{NUMBER10}</div> 
<div class="k-number">{NUMBER11}</div> 
<div class="k-number">{NUMBER12}</div> 
<div class="k-number">{NUMBER13}</div> 
<div class="k-number">{NUMBER14}</div> 
<div class="k-number">{NUMBER15}</div> 
<div class="k-number">{NUMBER16}</div> 
<div class="k-number">{NUMBER17}</div> 
<div class="k-number">{NUMBER18}</div> 
<div class="k-number">{NUMBER19}</div> 
<div class="k-number">{NUMBER20}</div> 
</div>

我需要以下條件：

if {NUMBERN} <= 10, then background-image: url('/images/super1.png'); 
if {NUMBERN} > 10 <20, then background-image: url('/images/super2.png'); 
if {NUMBERN} >= 20 <30, then background-image: url('/images/super3.png'); 
if {NUMBERN} >= 30 <40, then background-image: url('/images/super4.png'); 
if {NUMBERN} >= 40 <50, then background-image: url('/images/super5.png'); 
if {NUMBERN} >= 50 <60, then background-image: url('/images/super6.png'); 
if {NUMBERN} >= 60 <70, then background-image: url('/images/super7.png'); 
if {NUMBERN} >= 70, then background-image: url('/images/super10.png');

嗯，我知道如何使它工作使用PHP的開關，但我可以」使它使用JS工作。我嘗試了不同的代碼，但都沒有工作。

謝謝！

來源

2014-08-28 usc

使用CSS3功能nth-child您可以將background-image用於您的號碼範圍。看看我的例子在下面的jsfiddle。在我的情況下，我剛剛根據div的數量更改了background-color。您可以應用您的background-image而不是顏色。

#k-r div.k-number:nth-child(n+1):nth-child(-n+10){background-color:green;} 
#k-r div.k-number:nth-child(n+11):nth-child(-n+19){background-color:yellow;} 
#k-r div.k-number:nth-child(n+20):nth-child(-n+29){background-color:orange;} 
#k-r div.k-number:nth-child(n+30):nth-child(-n+39){background-color:blue;}

DEMO

來源

2014-08-28 10:10:44

謝謝！但總共只有20個{NUMBERN}，這意味着只有20個數字。這20個NUMBERN中的任何一個都可以在1到100之間 – usc 2014-08-28 10:26:06

哦。我誤解你的問題。 – 2014-08-28 10:34:30

看一看this solution：

$(document).ready(function(){ 
    $('.k-number').each(function() { 
     var value = parseInt($(this).html()); 
     if(value > 10) { 
      $(this).css('background-color', 'green'); 
     } 
    }); 
});

一旦文檔被完全加載，它通過每個項目迭代與類k-number，並解析其作爲一個整數的內容。如果該值大於10，則會更改背景顏色。

您應該能夠通過添加更多條件並更改背景圖像而不是顏色來採用此解決方案來解決您的問題。

來源

2014-08-28 11:42:17 Christopher

開關BG的形象，如果情況

回答

相關問題