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 Demo

Answer 2

请参阅this小提琴：

// 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>

当滑块值改变时，jQuery更新内部html

2 个答案: