縮短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; 
    } 
}