javascript - 无法在 Jquerymobile 中获取 slider 值

Question

您好，我很难获取 slider 值，我在一个页面中有五个 slider ，我按如下方式获取值

<div>
     <label for="slider" >1. choose a value.</label>
     <input type="range" id="p1slider1" name="p1slider1" class="slider" value="0" min="0" max="5" data-highlight="true" />
     <label class="sliderlabel"></label>
    </div>

尝试1

 var slider1 = $('input:text[id=p1slide1]').val();
  alert(slider1);

尝试2

<script>
 $("#p1slider1").on("change", function (event) {
    var value = event.target.value;
    console.log("Slider is moving, it's value is now: " + value);
});
</script>

尝试3尝试用div元素包围，如下

$("#div-slider").change(function() {
  var slider_value = $("#p1slider1").val();
  // do something..
});

他们都不适合我，不知道我哪里做错了

此外，由于我在每个页面中有五个 slider 和一个提交按钮，我想在单击提交按钮时将所有 slider 的值发送到数据库中，实现它的最佳方法是什么？ 任何有关此的信息表示赞赏

编辑

 var slide1;

 $( document ).ready(function() {
    $("#custom-li").click(insertRecordp1);
    $("#p1next").click(insertRecordp2);  // Register Event Listener when button click.

function insertRecordp1(tx) // Get value from Input and insert record . Function Call when Save/Submit Button Click..
{
     var orgname = $('input:text[id=name]').val();
     alert(orgname);
}    

   function insertRecordp2(tx) // Get value from Input and insert record . Function Call when Save/Submit Button Click..
{

} 
// below code not working-->your code
$("input#p1slider1").on("change", function (event) {
    slide1 = $(this).val();
    alert(slide1);
});

//below code works
$(document).on('change', function(){ 
   slider1 = $('input#p1slider1').val();
     console.log(slider1);
});


}); 
 </script>

我可以在 function2 中使用 slide1 吗？

Answer 1

在尝试 1 中，下面的代码适用于我。

  var slider1 = $('input#p1slider1').val();
  alert(slider1);

因此，只需在需要该值时调用即可。

演示 1 here .

在尝试 2 中，使用代码($(this) 表示 $("input#p1slider1")):

$("input#p1slider1").on("change", function (event) {
    var value = $(this).val();
    alert(value);
});

演示 2 here .