javascript - 根据文本值显示图像

Question

我有一个在列表中显示值的静态页面。此值表示元素中花费在每个单独实践上的百分比。有没有办法根据内容的值在 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>

如有任何帮助，我们将不胜感激。提前谢谢你。

Answer 1

您可以使用基于数字的 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];
});