javascript - Show Image based on text value - Stack Overflow

admin管理员组

文章数量:1333164

I have a static page that shows a value in a list. This value represents the percentage of a project that was spent on each individual practice. Is there a way to display a background image in the li based on the value of the content? I'm sure there is a javascript fix for this but I'm not sure where to start. Javascript is not my strong point at all.

There will be 4 values used (25 / 50 / 75 / 100) and a different image will be displayed depending on the value in the li.

The HTML is:

<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>

Any help would be appreciated. Thank you in advance.

I have a static page that shows a value in a list. This value represents the percentage of a project that was spent on each individual practice. Is there a way to display a background image in the li based on the value of the content? I'm sure there is a javascript fix for this but I'm not sure where to start. Javascript is not my strong point at all.

There will be 4 values used (25 / 50 / 75 / 100) and a different image will be displayed depending on the value in the li.

The HTML is:

<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>

Any help would be appreciated. Thank you in advance.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 27, 2014 at 11:59 Dhanu Gurung 8,8581111 gold badges4949 silver badges6060 bronze badges asked Jan 27, 2014 at 11:57 Stephen SmithStephen Smith 9922 silver badges66 bronze badges 2

• can you please tell me what are the values will be listing... – Raj Mohan Commented Jan 27, 2014 at 12:00
• Duplicate of stackoverflow./questions/5441680/… ? – Bogdan M. Commented Jan 27, 2014 at 12:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You can add classes to the elements using JavaScript based on the numbers:

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

Then in your css declare the classes:

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

http://jsfiddle/xcJ47/

You can also define a JavaScript object and use the jQuery .css() method:

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

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

Could you not make something like this?

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

this is static page. right? then add style in each li based on the value. like

<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');">

you cann add a class to the li like this and have your image set in css

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

if there is no class name given you might have to add some string cause its no good to have a class name starting with digits soo the last line should look somthing like

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

You can use jQuery's :contains(). For example (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'})

本文标签： javascriptShow Image based on text valueStack Overflow