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>

ジャバスクリプト:

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

Javascript:

$(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 に答える