javascript - 如果大小写切换 bg 图像

Question

我有以下 bbcode:

<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 使其工作。我尝试了不同的代码，但没有一个有效。

谢谢!

Answer 1

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