不同基礎範圍滑塊的總和值

Question

我正在嘗試添加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; 


} 

Answer 1

的onClick =是不是最好的 - 它可以神不知鬼不覺搞砸了（和非神祕，但我只是不喜歡它）。而應使用JQuery $(...).click(function);類型的點擊監控。

Working Fiddle

相關代碼：

HTML：

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

和Javascript（只是追加這個在您的JavaScript結束 - 確保它是onReady或類似的運行前）：

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

也與這個問題無關I在那裏注意一點片狀代碼;我建議使用ids而不是類或循環遍歷類來獲取每個成員，而不是僅僅調用它來獲取數字。其實我建議你更換整個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 *（第一滑塊的值）。 Fiddle for this version。

Answer 2

我是新來的這個框架，所以事情有點混亂。

我試圖創建一個滑塊來顯示總和，我不認爲我做了這個正確的滑塊看起來破碎。我已經修改了你的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> 

Javacript：

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