2015-02-05 71 views
0

我有一个范围滑块,并且我想要将数据滑块属性添加到输入字段中,因为它数字增加或获得跨度值添加输入字段:获取跨度的值,并将该值添加到输入字段

<div class="small-10 medium-11 columns"> 
    <div class="range-slider" data-options="display_selector: #sliderOutput3;" data-slider="35"> 
     <span class="range-slider-handle" tabindex="0" role="slider" style="transform: translateX(287.75px);"></span> 
     <span class="range-slider-active-segment" style="width: 35%;"></span> 
    </div> 
</div> 
<div class="small-2 medium-1 columns"> 
    <span id="sliderOutput3">35</span> 
</div> 
<input id="donationamount" type="text" value="50" name="donationamount"> 

我试过,但它并没有设定值:

$('#sliderOutput3').on('change', function() { 
    var tc = $('#sliderOutput3').text(); 
    $('#donationamount').val(tc); 
}); 
+0

更改事件不被'span'知道。你的滑块在变化上有它自己的事件吗? – 2015-02-05 14:23:09

回答

0

HTML:

<div class="small-10 medium-11 columns"> 
    <div class="range-slider" data-options="display_selector: #sliderOutput3;" data-slider="35"> 
     <span class="range-slider-handle" tabindex="0" role="slider" style="transform: translateX(287.75px);"></span> 
     <span class="range-slider-active-segment" style="width: 35%;"></span> 
    </div> 
</div> 


<div class="small-2 medium-1 columns"> 
    <span id="sliderOutput3">35</span> 
</div> 
<input id="donationamount" type="text" value="50" name="donationamount"> 
<br> 
<input id="donationamount2" type="text" value="50" name="donationamount2"> 

的jQuery:

$('#sliderOutput3').ready(function() { 
    //example 1 
     var tc = $('#sliderOutput3').text(); 
     $('#donationamount').val(tc); 

    //example 2 
     var dataSlider = $(".range-slider").attr("data-slider"); 
     $('#donationamount2').val(dataSlider); 
}); 

EXAMPLE

可以吗?

+0

这不太合适..它将输入设置为幻灯片的默认值..所以如果刷新页面,它将在35上,如果你移动幻灯片的数量不会随着数字的增加而改变..任何人都可以帮助 – 2015-02-05 18:17:55