Acortando el código Jquery de JavaScript - javascript, jquery

Me pregunto si hay una manera de acortar el código a continuación. He mostrado los primeros 5 si declaraciones. Tendré un total de 10 cuando haya terminado.

EDITAR: OLVIDADO LA PARTE MOUSEMOVE

$("#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
}
});

¡Gracias!

Respuestas

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

La biblioteca de matemáticas contiene algún navegador optimizadoFunciones para ayudarte con los números. La primera declaración toma la coordenada x, resta 7 y divide por 10 para convertir 467 en 46, 457 en 45 y 458 en 45.1. Math.ciel redondea esto, convirtiendo 458 en 46. Luego restamos 36 para obtener 10, y asignamos el menor del resultado del cálculo anterior y el número 10 (el número más grande). Podemos usar vol para hacer la cadena de la imagen.

Probablemente puedas usar la aritmética para simplificar el código. La división en e.pageX debería permitirle derivar el índice.

A continuación se muestra el código abreviado. No estoy seguro de cuál es su código real, pero esto es apropiado para lo que ha publicado. Espero que se explique por sí mismo.

var vb = $(this),
max = 467,
frequency = 10, // difference between (467, 458), (457, 448) and so on...(your if conditions)
maxVol = 10;

/* Find the range in which e.pageX falls. This will return, for example, if e.pageX was 460, then pageXband is 0.
* If e.pageX is 437, then pageXband is 4 and so on.
*/
var pageXband = parseInt((max - e.pageX) / frequency);

vol = maxVol - pageXband; // "vol" is the difference between maxVol and pageXband.
vb.attr("src","images2/vb"+vol+".png");

$("#bar").mousemove(function (e) {
$(this).attr("src", "image2/vb" + (vol = (e.pageX-367)/10|0) + ".png");
});

Ya tienes varias buenas respuestas mostrandocómo hacerlo utilizando la aritmética, pero solo para permitir una situación hipotética en la que los rangos para cada caso sean todos diferentes y, por lo tanto, no encajen en una fórmula conveniente, aún puede acortar el código, dados los dos valores que establece en cada caso están directamente relacionados (aunque no está claro qué está utilizando vol para): acaba de establecer vol en cada rama y luego al final, use eso para establecer la fuente de la imagen. Además, aunque no hace el código más corto, debes usar else if para que no evalúen todas las condiciones.

$("#bar").mousemove(function(e){
var vol;
if (e.pageX <=467 && e.pageX > 457)
vol=10;
else if (e.pageX <=457 && e.pageX > 447)
vol=9;
else if (e.pageX <=447 && e.pageX > 437)
vol=8;
// etc

$(this).attr("src","images2/vb" + vol + ".png");
});

Y hablando de no evaluar todas las condiciones, si los rangos son contiguos, no es necesario probar la parte superior y límites inferiores cada vez:

$("#bar").mousemove(function(e){
var vol;
if (e.pageX > 467 || e.pageX < someMinimumValue)
return; // or set default vol = ?
else if (e.pageX > 457)
vol=10;
else if (e.pageX > 447)
vol=9;
else if (e.pageX > 437)
vol=8;
// etc

$(this).attr("src","images2/vb" + vol + ".png");
});

Es bueno para intervalos regulares y regulares.

$("#bar").mousemove(function(e){
var vol = decide(e.pageX);
$(this).attr("src","images2/vb" + vol + ".png");

});

function decide (val1) {
switch (true) {
case val1 >= 457 && val1 <= 467 : return 10;
case val1 >= 447 && val1 <= 457 : return 9;
case val1 >= 437 && val1 <= 447 : return 8;
case val1 >= 427 && val1 <= 437 : return 7;
case val1 >= 417 && val1 <= 427 : return 6;
default : return 0;
}
}