Question

我写了类似下面的内容。用id“PLUS”我点击div的onclick 我收到以下错误：

cannot call methods on slider prior to initialization attempted to call method 'value'

<div id="PLUS" class="PLUS"></div>
<script>
  $(function() {
    $(".slider").slider({
      animate: true,
      range: "min",
      value: 18,
      min: 18,
      max: 70,
      step: 1,
      slide: function(event, ui) {
        $("#slider-result").html(ui.value);
        document.getElementById(findElement('ageId')).value = ui.value;
      },
      //this updates the hidden form field so we can submit the data using a form
      change: function(event, ui) {
        $('#hidden').attr('value', ui.value);
      }
    });

    $(".PLUS").click(function() {
      var value = $("#slider-result").slider("value"),
        step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
    });

  });
</script>

感谢任何帮助。

Answer 1

如果我们详细检查错误，您会发现它表示您在滑块插件初始化之前尝试调用$(".slider").slider({方法。

<强>原因：

实际上JavaScript是一种解释型语言，它不会等待第一个命令执行和完成。这就是为什么$(".PLUS").click(function() {和setTimeout行同时运行并发生错误的原因。

<强>解决方案：

您可以将代码放在<script> $(function() { $(".slider").slider({ animate: true, range: "min", value: 18, min: 18, max: 70, step: 1, slide: function(event, ui) { $("#slider-result").html(ui.value); document.getElementById(findElement('ageId')).value = ui.value; }, //this updates the hidden form field so we can submit the data using a form change: function(event, ui) { $('#hidden').attr('value', ui.value); } }); setTimeout(function(){ $(".PLUS").click(function() { var value = $("#slider-result").slider("value"), step = $("#slider-result").slider("option", "step"); $("#slider-result").slider("value", value + step); }); },200); // 200 = 0.2 seconds = 200 miliseconds }); </script>函数中，这是下面给出的示例。

usertype

我希望这能帮到你/某人。

此致

Answer 2

您在初始化时使用了$(".slider").slider() $("#slider-result").slider()在获取值时，某些插件会在init时使用的选择器上运行，所以请尝试。

Answer 3

导致错误是因为$("#slider-result")不是初始化为滑块的元素，而是您尝试在其上执行滑块小部件方法而不是$(".slider")这是实际的滑块。

您的代码应为

$(".PLUS").click(function() {
  var value = $(".slider").slider("value"),
    step = $(".slider").slider("option", "step");
  $("#slider-result").text(value + step);
 //---- maybe you'll need to ----^----  parseInt() the values here
});

Answer 4

我有类似的问题。你的块在这里

$(".PLUS").click(function() {
     var value = $("#slider-result").slider("value")
      , step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
});

将其保留在

之下

create: function( event, ui ) {}

即

create: function( event, ui ) {
    $(".PLUS").click(function() {
      var value = ui.value;
      , step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
  });
}

希望这有效。

Answer 5

我发现实现此目标的最佳方法是使用滑块库中ON函数中的事件来获取值。例如：

slider.on('slideStop', function(ev) {
    let value= ev.value; //try ev if you want to see all
    console.log(value);
})

致谢

错误：无法在初始化之前调用滑块上的方法尝试调用方法'value'

5 个答案: