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];
});

Answer 2

你能不能做出这样的事情吗？

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

Answer 3

这是静态页面。对？然后根据值在每个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');">

Answer 4

你可以像这样在li中添加一个类，并将你的图像设置为css

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

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

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

Answer 5

您可以使用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'})

根据文本值显示图像

5 个答案: