javascript - 将值保存在数组中(并覆盖每次更新)

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 个 slider = 25 个 slider 。

需要获取每个 slider 的id和值并另存为

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

以下是获取每个 slider 值的脚本:

 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');
 }

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

我需要将每个“保存”写入值数组，然后将此数据保存在 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"
                }...
       ]

如何将值保存在数组中(并覆盖相应 slider 值的每次更改)？

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