jquery - jQuery 在滑块值更改时更新内部 html

Question

我的 html 5 页面上有 8 个滑块（输入类型 =“范围”）。

对于其中的每一个，我希望将值写在它旁边，并在每次滑块值更改时更新。

我想在 1 jquery 回调中做到这一点。

到目前为止，我有：

$('input[type="range"]').change(function(e) {
  // here I need to update the inner html for the relevant slider.
});

Answer 1

你可以通过简单地抓住.val()它，并将该值放在它旁边的跨度内来获得它。

$('input[type="range"]').on('change', function(e) {
    var _val = $(this).val();
    $(this).next('span').text(_val);
});​

jsFiddle 演示

Answer 2

看到这个小提琴：

// js
$("input[type=range]").change(function(){

    $("#" + $(this).attr("id") + "_value").text( $(this).val() );

});​

// html
<input id="range1" type="range" min="1" max="5" /><span id="range1_value"></span>
<br />
<input id="range2" type="range" min="1" max="5" /><span id="range2_value"></span>
​