Javascript 不同基础距离滑块的和值
我正在尝试添加6个不同范围滑块的值并显示结果。 我得到了一个我所期望的数字,但我只是想弄清楚如何对每个滑块的属性求和。所以当按下按钮时,我会得到所有的总数 我创建了一个JSFIDLE,但它不起作用。请看这里: 有什么建议吗 HTML:Javascript 不同基础距离滑块的和值,javascript,sum,zurb-foundation,rangeslider,Javascript,Sum,Zurb Foundation,Rangeslider,我正在尝试添加6个不同范围滑块的值并显示结果。 我得到了一个我所期望的数字,但我只是想弄清楚如何对每个滑块的属性求和。所以当按下按钮时,我会得到所有的总数 我创建了一个JSFIDLE,但它不起作用。请看这里: 有什么建议吗 HTML: onClick=不是最好的-它可以神秘地和非神秘地搞砸,但我就是不喜欢它。而是使用JQuery$..clickfunction;单击监视的类型 相关代码: HTML: 也与这个问题无关,我注意到了一些不稳定的代码;我建议使用id而不是类,或者通过类循环来获取每个成
onClick=不是最好的-它可以神秘地和非神秘地搞砸,但我就是不喜欢它。而是使用JQuery$..clickfunction;单击监视的类型 相关代码: HTML: 也与这个问题无关,我注意到了一些不稳定的代码;我建议使用id而不是类,或者通过类循环来获取每个成员,而不是仅仅调用它六次来获取数字。事实上,我建议您将整个javascript替换为:
$(document).foundation();
function doMath()
{
var sum = 0;
$('.range-slider').each(function() {
sum += parseInt($(this).attr('data-slider'));
});
document.getElementById('myResults').innerHTML = sum;
}
$("#sum").click(doMath);
实际上,您将获得正确的和,而不是第一个滑块的6*值 我不熟悉这个框架,所以事情有点混乱 我试图创建一个滑块来显示总和,但我认为我没有正确执行此操作,因为滑块看起来已损坏。我对javascript进行了一些修改,希望将总和分配给滑块 HTML:
$(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;
}
...snip...
<input type="button" value="sum" id="sum" />
...snip...
$("#sum").click(doMath);
$(document).foundation();
function doMath()
{
var sum = 0;
$('.range-slider').each(function() {
sum += parseInt($(this).attr('data-slider'));
});
document.getElementById('myResults').innerHTML = sum;
}
$("#sum").click(doMath);
<div class="range-slider-total" data-slider data-options="start: 1; end: 2250; display_selector: #SliderOutput7;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
<div id="SliderOutput7"></div>
$(document).foundation();
function doMath()
{
var sum = 0;
$('.range-slider').each(function() {
sum += parseInt($(this).attr('data-slider'));
});
document.getElementById('myResults').innerHTML = sum;
var new_value = sum;
$('.range-slider-total').foundation('slider', 'set_value', new_value);
}
$("#sum").click(doMath);