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

所以，我在控制台中看到＆＃39; save＆＃39;对于每个滑块。

我需要写每个＆＃39; save＆＃39;作为值数组，然后将此数据保存在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);

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

1 个答案:

jsfiddle