将值保存在数组中（并覆盖每次更新）

Question

我无法将值保存为数组。

我有这样的 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>

5 个容器，里面有 5 个滑块 = 25 个滑块。

需要获取每个滑块的id和值并保存为

 "sliders":[
               {
                    "slider":"slider1",
                    "value":"1"
               },
               { 
                     "slider":"slider2", 
                     "value":"1"
                }...
       ]

这是获取每个滑块值的脚本：

 slider = $('.slider');
 var len = slider.length;

 $(slider).change(function () {
     bt = $(this).attr('id');
      value = $(this).val();

      save = '{"slider":"' + bt + '", "value":"' + value + '"}';
         console.log('save', save);
      })

     .trigger('change');
 }

所以，我在控制台中看到每个滑块的“保存”。

我需要将每个“保存”写入值数组，然后将此数据保存在 json 文件中并用于其他页面。

我在努力

function saveValues(){

     var toSave = '"slide10" : {';

     toSave += '"sliders":[';

     for (var i=1;i<len;i++) {
         toSave +=''+save+',';
     }

     toSave+=']';
     return toSave+='}';
}

但它会将最后一次“保存”的值保存 25 次... :( 像这样：

"sliders":[
               {
                    "slider":"slider25",
                    "value":"1"
               },
               { 
                     "slider":"slider25", 
                     "value":"1"
                }...
       ]

如何将值保存在数组中（并覆盖相应滑块值的每次更改）？

Answer 1

你可以这样做：

//get all range type's
var sliders = document.querySelectorAll('[type="range"]');
//prepare array variable
var result = [];
//loop the sliders
for(var i=0, l=sliders.length; i < l; i++){
    var slider = sliders[i];
    //push the object with id and value in the array
    result.push({
        slider: slider.id,
        value: slider.value
    });
}
//display the result :)
console.log(result);

jsfiddle