0

我正在尝试添加 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;


}
4

2 回答 2

0

我是这个框架的新手，所以事情有点混乱。

我试图创建一个滑块来显示总和，我认为我没有正确地做到这一点，因为滑块看起来坏了。我稍微修改了你的javascript，希望将总和分配给一个滑块。http://jsfiddle.net/Ae5Y4/7/

HTML：

<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>

Java脚本：

$(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);
于 2014-05-16T16:03:43.157 回答
0

onClick= 不是最好的 - 它可能会神秘地搞砸（并且不神秘，但我只是不喜欢它）。而是使用JQuery $(...).click(function);点击监控的类型。

工作小提琴

相关代码：

HTML：

...snip...
<input type="button" value="sum" id="sum" />
...snip...

和 Javascript（只需将其附加到 javascript 的末尾 - 在运行之前确保它处于 onReady 或类似状态）：

$("#sum").click(doMath);

也与那个问题无关，我注意到那里有一些片状代码；我建议使用 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*（第一个滑块的值）。小提琴这个版本。

于 2014-05-08T15:29:45.397 回答