Question

我有一个滑块，结果（数字）显示在id为#output的div中。

所以我想将这个变量也传递给id为#sites的输入字段，但我还是坚持了。如何使用.val（）更改value属性？

这是代码

$(document).ready(function() {
  $( function() {
    var out = $('#output');
    $( "#slider" ).slider({
          min: 1,
          max: 50,

      slide: function(evt, ui) {
        out.html(ui.value);
      }

    });
    $("#sites").val(out);
  } );
 });

Answer 1

尝试$("#sites").val(out.text());

Answer 2

您必须在幻灯片回调中执行此操作：

slide: function(evt, ui) {
   out.html(ui.value);
   $("#sites").val(ui.value);
}

因为当用户与滑块交互并且您尝试在文档就绪块外部设置值时，会发生滑动事件。此时，该值为滑块的默认值。

$(document).ready(function() { // this is as same as
  $( function() { // this one. extra doc ready block is not needed.
   ......
  });
});

Answer 3

首先请注意，您只需要一个document.ready处理程序。要解决您的实际问题，请将用于设置#sites 值的代码放在 slide处理程序中。目前，您只需在用户与控件交互之前设置页面加载值，请尝试以下操作：

$(function() {
  var $out = $('#output');

  $("#slider" ).slider({
    min: 1,
    max: 50,
    slide: function(evt, ui) {
      $out.html(ui.value);
      $("#sites").val(ui.value);
    }
  });
});

将变量传递给slider（）中的value属性

3 个答案: