javascript - 根据文字值显示图片

我有一个静态页面，它在列表中显示一个值。该值表示在每个练习中花费的项目百分比。有没有一种方法可以根据内容的值在li中显示背景图像？我确定对此有一个JavaScript修复程序，但是我不确定从哪里开始。 Javascript根本不是我的强项。

将使用4个值(25/50/75/100)，并且将根据li中的值显示不同的图像。

HTML是:

<div class="col-md-6">
  <ul class="list-inline stats">
    <li>25<small>Strategy</small></li>
    <li>25<small>Design</small></li>
    <li>25<small>Production</small></li>
    <li>25<small>Marketing</small></li>
  </ul>
</div>

任何帮助，将不胜感激。先感谢您。

最佳答案

您可以使用JavaScript根据数字将类添加到元素:

$('.list-inline li').addClass(function() {
   return 'bg' + this.firstChild.nodeValue;
});

然后在您的CSS中声明类:

.bg25 { background-image: ... }
.bg50 { background-image: ... }

http://jsfiddle.net/xcJ47/

您还可以定义一个JavaScript对象并使用jQuery .css()方法:

var bgs = {
   '25' : 'url(...)',
   '50' : 'url(...)',
   '75' : 'url(...)',
   '100': 'url(...)'
   // ...
}

$('.list-inline li').css('background-image', function() {
    return bgs[this.firstChild.nodeValue];
});