title: change image based on jquery ui slider
body: <p>I want to change the background image of an element inside a slider div based upon the slider value. The images are in a resource folder of eclipse ...</p>
  
  <p>I have a CSS class named <code>character</code> and in that class I have a <code>background-image</code> rule which I want to change when the slider value changes.</p>
  
  <p>Currently when I slide a slider, all the <code>character</code> elements background images change. This is not the behavior that I desire. I want each <code>character</code> element's background image to change only when its wrapping slider changes.</p>
  
  <p>This is the code I have so far:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $( ".&lt;%=i%&gt;" ).slider({
              disabled:false,
              animate:"slow",
              range: "min",
              value:6,
              min: 0,
              max: 10,
              step: 1,
              slide: function( event, ui ) {
                  $( "#&lt;%=i%&gt;" ).val(  ui.value );
                  $( "#hidden&lt;%=i%&gt;" ).val( ui.value );
              }
          });
          $( "#&lt;%=i%&gt;" ).val(  $( ".&lt;%=i%&gt;" ).slider( "value" ) );
          $( "#hidden&lt;%=i%&gt;" ).val(  $( ".&lt;%=i%&gt;" ).slider( "value" ) );
      });
  &lt;/script&gt;
  &lt;script&gt;
      if($( "#hidden&lt;%=i%&gt;" ).val( ui.value )==6)
      {       
          $('.character', this).css("background-image", "url(../images/characters/1.png)");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Does anyone see what I am doing wrong?</p>