Question

嘿，我一直在尝试使用Foundation 5中的范围滑块。我尝试将范围滑块的总和分配给另一个范围滑块，但它看起来并不正确。对这个框架不熟悉所以我有点困惑。继承人jsfiddle：http://jsfiddle.net/Ae5Y4/7/

HTML：

<div class="row">
    <div class="large-6 columns">

        <div class="range-slider" id="slider1" 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" id="sum" />

        <div id="myResults"></div>
        <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>
   </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);

Answer 1

它被破坏是因为你用range-slider取代range-slider-total类来打破它。只需在js中使用不同的选择器并返回旧类。

Foundation 5 Range滑块问题

1 个答案: