Multiple jquery slider instances
I've开发者_运维百科 got 3 jquery sliders on one page showing shoe sizes for different groups (mens/women/children). Each group has an array of values for UK/US/Euro. When I run it though only the first instance updates the sizes for US/EURO aren't pulled back. What am I missing?
http://www.petersenuploads.co.uk/footslider.html
Thanks
The problem is there are -
(minus) signs instead of equal signs used when defining the arrays:
sizesWomens[0] - new Array(3,4.5,35.5);
should be
sizesWomens[0] = new Array(3,4.5,35.5);
But I think it would be better to use a different method than what you have, especially for the children's sizes since they go back to 2... give me a min to work on a fix for that ;)
Update: Try this code (setting up the arrays could be done much cleaner) - Here's a 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]));
});
精彩评论