多個jQuery滑塊實例

Question

我在一個頁面上顯示了3個jquery滑塊，顯示不同組別（男士/女士/兒童）的鞋號。每個組都有一組英國/美國/歐元的值。當我運行它時，雖然只有第一次更新美國/歐元的大小不會退回。我錯過了什麼？

http://www.petersenuploads.co.uk/footslider.html

由於

Answer 1

的問題是有-（減號）符號，而不是限定的陣列時使用等號：

sizesWomens[0] - new Array(3,4.5,35.5); 

應該是

sizesWomens[0] = new Array(3,4.5,35.5); 

但我認爲這會更好使用不同的方法比你所擁有的，尤其是對兒童的大小，因爲他們回去2 ...給我分就應該是一個固定的工作;）

---

更新：試試這個代碼（設置陣列可以做得更乾淨） - 這是demo！

$(document).ready(function() { 
    var updateSizes = function (s) { 
     return "UK size:" + s[0] + ", US size: " + s[1] + ", Euro size: " + s[2]; 
    }, 
    menSizes = Array(14), 
    womenSizes = Array(10), 
    childrenSizes = Array(18); 

    menSizes[0] = [5, 6, 38]; 
    menSizes[1] = [5.5, 6.5, 38.5]; 
    menSizes[2] = [6, 7, 39]; 
    menSizes[3] = [6.5, 7.5, 40]; 
    menSizes[4] = [7, 8, 40.5]; 
    menSizes[5] = [8, 9, 42]; 
    menSizes[6] = [8.5, 9.5, 42.5]; 
    menSizes[7] = [9, 10, 43]; 
    menSizes[8] = [9.5, 10.5, 44]; 
    menSizes[9] = [10, 11, 44.5]; 
    menSizes[10] = [10.5, 11.5, 45]; 
    menSizes[11] = [11, 12, 46]; 
    menSizes[12] = [11.5, 12.5, 46.5]; 
    menSizes[13] = [12, 13, 47]; 

    womenSizes[0] = [3, 4.5, 35.5]; 
    womenSizes[1] = [3.5, 5, 36]; 
    womenSizes[2] = [4, 5.5, 37]; 
    womenSizes[3] = [5, 6.5, 38]; 
    womenSizes[4] = [5.5, 7, 38.5]; 
    womenSizes[5] = [6, 7.5, 39]; 
    womenSizes[6] = [6.5, 8, 39.5]; 
    womenSizes[7] = [7, 8.5, 40]; 
    womenSizes[8] = [7.5, 9, 41]; 
    womenSizes[9] = [8, 9.5, 42]; 

    childrenSizes[0] = [0, 0, 15]; 
    childrenSizes[1] = [0.5, 1, 16]; 
    childrenSizes[2] = [1.5, 2, 17.5]; 
    childrenSizes[3] = [2.5, 3, 19]; 
    childrenSizes[4] = [3.5, 4, 20]; 
    childrenSizes[5] = [4.5, 5, 21]; 
    childrenSizes[6] = [5.5, 6, 22.5]; 
    childrenSizes[7] = [6.5, 7, 23.5]; 
    childrenSizes[8] = [7.5, 8, 25]; 
    childrenSizes[9] = [8, 9, 27]; 
    childrenSizes[10] = [9, 10, 28]; 
    childrenSizes[11] = [10, 11, 29]; 
    childrenSizes[12] = [11, 12, 30]; 
    childrenSizes[13] = [12, 13, 31]; 
    childrenSizes[14] = [13.5, 1, 32.5]; 
    childrenSizes[15] = [2, 2, 34]; 
    childrenSizes[16] = [2.5, 3, 35]; 
    childrenSizes[17] = [3.5, 4, 36]; 

    $("#slider-men").slider({ 
     range: "max", 
     min: 0, 
     max: 13, 
     step: 1, 
     slide: function (e, ui) { 
      $("#amount-men").val(updateSizes(menSizes[ui.value])); 
     } 
    }); 
    $("#amount-men").val(updateSizes(menSizes[0])); 
    $("#slider-women").slider({ 
     range: "max", 
     min: 0, 
     max: 9, 
     step: 1, 
     slide: function (e, ui) { 
      $("#amount-women").val(updateSizes(womenSizes[ui.value])); 
     } 
    }); 
    $("#amount-women").val(updateSizes(womenSizes[0])); 
    $("#slider-children").slider({ 
     range: "max", 
     min: 0, 
     max: 17, 
     step: 1, 
     slide: function (e, ui) { 
      $("#amount-children").val(updateSizes(childrenSizes[ui.value])); 
     } 
    }); 
    $("#amount-children").val(updateSizes(childrenSizes[0])); 
});