缩短javascript Jquery代码

我想知道是否有办法缩短下面的代码。我已经展示了前5个if语句。当我完成时，我总共会有10个

编辑：忘记了鼠标移动部分

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

---

谢谢

您可能可以使用算术来简化代码。e.pageX上的除法应该允许您导出索引

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

---

“数学库”包含一些优化的浏览器函数，可帮助您处理数字。第一个语句取x坐标，减去7，再除以10，将467变成46，457变成45，458变成45.1。Math.ciel将其四舍五入，将458变为46。然后我们减去36得到10，并将上述计算结果中较小的一个和数字10指定为最大的数字。我们可以使用vol来生成图像字符串。

下面是缩短的代码。不确定你真正的代码是做什么的，但这适合你发布的内容。我希望这对你来说是不言自明的

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

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

---

你已经有好几个很好的答案说明了如何使用算术，但考虑到一种假设情况，即每种情况下的范围都不同，因此不适合于一个方便的公式，您仍然可以缩短代码，因为您在每种情况下设置的两个值直接相关，尽管不清楚您使用vol的目的：只需在每个分支中设置vol，然后在最终使用时设置vol该选项用于设置图像源。此外，虽然它不会使代码更短，但是如果不需要计算每个条件，则应该使用else

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

---

它适用于定期和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;
    }
}

---

脚本的作用是什么？如果看起来特定于页面更改或加载时。你可以检查一下开关，但这需要很多检查。为什么每10像素就需要一次？我不知道如何缩短，但如果需要的话，你一定要用其他的。谢谢。我也很感激：你可以用：$bar.mousemovefunctiona{var b=Math.ceila.pageX-7/10-36；$this.attrsrc，images2/vb+b+.png}来进一步缩短它：我尝试过添加它，提醒12。图像仅为1到10。将min添加到vol计算中。效果非常好。这是一些漂亮的代码。你可以添加一些注释来解释它是如何工作的吗？你不需要在返回语句之后再添加break语句。是的，你是对的。但是，在switch case中使用break是一种很好的做法。标准做法是，对于有返回的case，不包含冗余break语句，尤其是在每个case都有返回的情况下。