缩短JavaScript的jQuery代码

Question

我想知道如果有一种方法来缩短下面的代码。我已经显示了前5个如果陈述。当我完成时，我将总共有10个。

编辑：忘了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 
      } 
}); 

谢谢！

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

Math函数库包含一些优化的浏览器函数来帮助您处理数字。第一个陈述采用x坐标，减去7并除以10，将467转换为46,457，将45和458转换成45.1。 Math.ciel把这个数字加起来，把458变成46，然后减去36得到10，并且将上述计算的输出和数字10（最大数字）中较小的一个赋值。我们可以用vol来制作图像字符串。

Answer 2

你或许可以用算术来简化代码。在e.pageX上的分区应该让你得出索引。

Answer 3

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

Answer 4

下面是缩短的代码。不知道你的真实代码是做什么的，但是这对于你发布的内容是适当的。我希望这对你来说是不言自明的。

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

Answer 5

你一定已经展示了如何使用算术做到这一点，但只是以允许假设的情况下每个个案的范围都是不同的几个很好的答案，因此不适合到一个方便的公式你仍然可以缩短代码有点给你在每一种情况下设置的两个值有直接关系（虽然目前还不清楚你使用的是什么vol为）：刚刚在每个分支设置vol，然后在最终用途来设置图像源。此外，虽然它不会缩短代码，但您应该使用else if，以便您不评估每个条件。

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

而且不是每一个评估条件来说，如果这个范围是连续的，你不需要测试上和下限每次：

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

Answer 6

其良好的定期和IR - 间隔，

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