Есть HTML конструкция следующего вида
<div id="cn1" class="container cont container4">
<input id="slider1" type="range" class="slider slider1" min="0" max="5" value="1" step="1">
<input id="slider2" type="range" class="slider slider2" min="0" max="5" value="1" step="1">
<input id="slider3" type="range" class="slider slider3" min="0" max="5" value="1" step="1">
<input id="slider4" type="range" class="slider slider4" min="0" max="5" value="1" step="1">
<input id="slider5" type="range" class="slider slider5" min="0" max="5" value="1" step="1"
></div>
несколько контейнеров c id="cn"+i; где i, от 1 до 5.
В каждом контейнере по 5 слайдеров , id для слайдера = j, где j от 1 до 25;
т.е всего на странице 25 слайдеров.
Скрипт
for (i = 1; i < 25; i++) {
slider = "#slider" + i;
$(slider).each(function () {
bt = $(this).attr('id');
value=$(this).val();
save='{"slider":"'+bt+'", "value":"'+value+'"},';
}
//при изменении значения - записываем toSave
$(slider).change(function () {
bt = $(this).attr('id');
value=$(this).val();
save='{"slider":"'+bt+'", "value":"'+value+'"},';
}
console.log (save) - выводит все значения слайдеров (все 25).
нужно сохранить все полученные save в виде массива:
function saveForm(){
var toSave = '"slide10" : {';
toSave += '"sliders":[';
for (var i=1,i<26;i++) {
toSave +=''+save+'';
}
toSave+=']';
return toSave+='}';
}
В toSave записывает 25 save, но дублирует последнее значение {"slider":"slider25", "value":"1"},
Как вывести все значения, а не дублировать последнее?
....
"sliders":[
{
"slider":"slider1",
"value":"1"
},
{
"slider":"slider2",
"value":"1"
}...
]