我正在尝试添加6个不同范围滑块的值并显示结果。 我得到一个数字,因为我期望与此,但我只是想弄清楚如何总结每个滑块的属性。所以当按下按钮时,我会得到所有的全部。不同基础范围滑块的总和值
我创建了一个jsfiddle,但它不起作用。请看这里:http://jsfiddle.net/Ae5Y4/3/
有什么建议吗?
HTML:
<div class="row">
<div class="large-6 columns">
<div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput1;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
<div id="SliderOutput1"></div>
<div class="range-slider" data-slider data-options="start: 1; end: 250; display_selector: #SliderOutput2;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
<div id="SliderOutput2"></div>
<div class="range-slider" data-slider data-options="start: 1; end: 200; display_selector: #SliderOutput3;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
<div id="SliderOutput3"></div>
</div>
<div class="large-6 columns">
<div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput4;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
<div id="SliderOutput4"></div>
<div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput5;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
<div id="SliderOutput5"></div>
<div class="range-slider" data-slider data-options="start: 1; end: 200; display_selector: #SliderOutput6;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
<div id="SliderOutput6"></div>
<br/><br/>
<input type="button" value="Sum" onclick="doMath();" />
<br/><br/>
<div id="myResults"></div>
JAVASCRIPT:
$(document).foundation();
function doMath()
{
var my_input1 = $('.range-slider').attr('data-slider');
var my_input2 = $('.range-slider').attr('data-slider');
var my_input3 = $('.range-slider').attr('data-slider');
var my_input4 = $('.range-slider').attr('data-slider');
var my_input5 = $('.range-slider').attr('data-slider');
var my_input6 = $('.range-slider').attr('data-slider');
var sum = 0;
// Add them together and display
var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
document.getElementById('myResults').innerHTML = sum;
}