Show Image based on text value

Question

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

25Strategy
25Design
25Production
25Marketing

``` Any help would be appreciated. Thank you in advance.

Accepted Answer

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.net/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];
});
```

Show Image based on text value

Solution

Problem

Related problems