Question

I am wondering if there is a way to shorten the code below. I have shown the first 5 if statements. I will have a total of 10 when I am done.

EDIT: FORGOT THE MOUSEMOVE PART

$("#bar").mousemove(function(e){
    var vb = $(this);
           if(e.pageX <=467 &&  e.pageX > 457){
            vb.attr("src","images2/vb10.png");
            vol =10;
          }
          if(e.pageX <=457 && e.pageX > 447){
            vb.attr("src","images2/vb9.png");
            vol=9;
          }
          if(e.pageX <=447 && e.pageX > 437){
            vb.attr("src","images2/vb8.png");
            vol=8;
          }
          if(e.pageX <=437 && e.pageX > 427){
            vb.attr("src","images2/vb7.png");
            vol=7;
          }
          if(e.pageX <=427 && e.pageX > 417){
            vb.attr("src","images2/vb6.png");
            vol=6
          }
});

Thanks!

Answer 1

$("#bar").mousemove(function(e){
    var vol = Math.min( Math.ceil( (e.pageX - 7) / 10 ) - 36, 10 );
    $(this).attr("src","images2/vb"+vol+".png");
});

The Math library contains some optimized browser functions to help you with numbers. The first statement takes the x coord, subtracts 7 and divides by 10 to turn 467 into 46, 457 into 45 and 458 into 45.1. Math.ciel rounds this up, turning 458 into 46. We then subtract 36 to get 10, and assign the smaller of the output of the above computation and the number 10 (the largest number). We can use vol to make the image string.