Question

我想在div id =＆＃34; output＆＃34;中显示范围滑块的动态值。什么时候改变。感谢

     <div id="outcome_main_section">
        <div id="outcome_section_2">
            <div id="range_added_section"></div>

            <input type="submit" name="btn_submit"> 
            <input type="button" class="add_range" value="Add Range">
        </div>
    </div>

的Javascript

 $('body').on("change",".range_slider",function (){

    var range_value = $(this).val();

 });



$('body').on("click",".add_range",function(){

$('#range_added_section').append
(
    $(
        '<div id="output"></div>' + 
        '<input class="range_slider" type="range" min="1" max="100"        value="1" step="1" name="range_value[range_value][]" >'
     )
);
});

Answer 1

尝试在className替换id '<div id="output"></div>'，以防止在每次点击id元素时将重复的.add_range附加到文档中;利用.prev() .text()事件中的change，.range_slider选择上一个.output元素，将文本设置为下一个元素兄弟value input type="range" }}

$('body').on("change", ".range_slider", function() {
  var range_value = $(this).val();
  $(this).prev(".output").text(range_value)
});



$('body').on("click", ".add_range", function() {
  $('#range_added_section').append(
    $(
      '<div class=output></div>' +
      '<input class=range_slider type=range ' +
      'min=1 max=100 value=1 step=1 name=range_value[range_value][] >'
    )
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="add_range">add range</div>
<div id="range_added_section"></div>

如何在更改时显示div中的范围值？

1 个答案: