Javascript 如有必要，切换bg图像

我有以下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>

#k-r{字体系列：Arial，无衬线；字体大小：14px；字体重量：粗体；文本阴影：1px 1px#fcfcfc；}
.k-number{显示：表格单元格；背景图像：url（'/images/super1.png'）；背景重复：无重复；背景位置：中心；高度：30px；宽度：30px；文本对齐：中心；垂直对齐：中间；}
{NUMBER1}
{NUMBER2}
{NUMBER3}
{NUMBER4}
{NUMBER5}
{NUMBER6}
{NUMBER5}
{NUMBER7}
{NUMBER8}
{NUMBER9}
{NUMBER10}
{NUMBER11}
{NUMBER12}
{NUMBER13}
{NUMBER14}
{NUMBER15}
{NUMBER16}
{NUMBER17}
{NUMBER18}
{NUMBER19}
{NUMBER20}

我需要以下信息：

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');

如果{NUMBERN}10=20=30=40=50=60=70，则背景图像：url（'/images/super10.png'）；

我知道如何使用php的开关使其工作，但我不能使用JS使其工作。我尝试了不同的代码，但都不起作用

---

谢谢

使用CSS3功能

n子项

您可以为您的数字范围应用

背景图像

。请看下面JSFIDLE中的示例。在我的例子中，我刚刚根据

div

的计数更改了

背景色。您可以应用
背景图像
，而不是颜色

#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;}

看看：

文档完全加载后，它将使用类
k-number
遍历每个项目，并将其内容解析为整数。如果该值大于10，则会更改背景色

您应该能够通过添加更多条件和更改背景图像而不是颜色来采用此解决方案解决问题。
谢谢！但是总是只有20个{NUMBERN}，这意味着只有20个数字。这20个数字中的任何一个都可能在1到100oh之间。我误解了你的问题。
$(document).ready(function(){
    $('.k-number').each(function() {
        var value = parseInt($(this).html());
        if(value > 10) {
           $(this).css('background-color', 'green'); 
        }
    });
});