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中的例子。就我而言，我刚刚根据background-color的数量更改了div。您可以应用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

Answer 2

查看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，则背景颜色会更改。

您应该能够通过添加更多条件并更改背景图像而不是颜色来为您的问题采用此解决方案。

如果是情况，请切换bg图像

2 个答案: