Question

我想知道是否有办法缩短下面的代码。我已经展示了前5个if语句。我完成后总共会有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

对常规和非常规间隔有好处，

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

缩短javascript Jquery代码

6 个答案: