多个jquery滑块实例

时间:2011-02-25 17:30:33

标签: jquery slider

我在一个页面上有3个jquery滑块,显示不同组(男士/女士/儿童)的鞋码。每个组都有一系列英国/美国/欧元的价值。当我运行它时,虽然只有第一个实例更新,但US / EURO的尺寸不会被撤回。我错过了什么?

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

由于

1 个答案:

答案 0 :(得分: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]));
});