根据文本值显示图像答案

【问题标题】：Show Image based on text value根据文本值显示图像
【发布时间】：2014-02-18 06:08:33
【问题描述】：

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

任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

你能告诉我列出的值是什么...
stackoverflow.com/questions/5441680/… 的副本？

标签： javascript jquery html css

【解决方案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];
});

【讨论】：

最佳解决方案，因此我删除了对此的回答。

【解决方案2】：

您可以使用jQuery's :contains()。例如（fiddle）

$('.list-inline.stats li:contains(25)').css({background: 'red'})
$('.list-inline.stats li:contains(50)').css({background: 'green'})
$('.list-inline.stats li:contains(75)').css({background: 'blue'})

【讨论】：

【解决方案3】：

你不能像这样向 li 添加一个类并在 css 中设置你的图像

$(document).ready(function(){
    var $elem = $('.list-inline li');
    var strClass = $elem.html().substr(0,2);
    $elem.addClass(strClass);
});

如果没有给出类名，你可能需要添加一些字符串，因为类名以数字开头是不好的，所以最后一行应该看起来像

        $elem.addClass('myNewStyle '+strClass);

【讨论】：

【解决方案4】：

这是静态页面。正确的？然后根据值在每个 li 中添加样式。喜欢

<li style="background-image:url('first.gif');">
<li style="background-image:url('second.gif');">
<li style="background-image:url('third.gif');">
<li style="background-image:url('fourth.gif');">

【讨论】：

【解决方案5】：

你不能做这样的东西吗？

HTML

<li class="percentage_li" data-percent="25">25<small>Strategy</small></li>

jQuery

var curr_percent = 0;

$(".percentage_li").each(function(){
    curr_percent = $(this).data('percent');
    $(this).css({'background-image':'url('images/'+curr_percent+'.jpg')'});
});

【讨论】：