错误：无法在初始化之前调用滑块上的方法尝试调用方法“值”答案

【问题标题】：Error : cannot call methods on slider prior to initialization attempted to call method 'value'错误：无法在初始化之前调用滑块上的方法尝试调用方法“值”
【发布时间】：2013-05-17 04:46:12
【问题描述】：

我写了类似下面的东西。 onclick id 为“PLUS”的 div 我我收到以下错误：

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>

感谢任何帮助。

【问题讨论】：

请分享其余必要的 HTML，例如元素 ".slider"、"#slider-result" 等

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

如果我们仔细检查错误，您会注意到它说您正在尝试在 slider 插件初始化之前调用value 方法。

原因：

实际上 JavaScript 是一种解释型语言，它不会等待第一个命令执行并完成。这就是为什么您的 $(".slider").slider({ 和 $(".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>

我希望这会对你/某人有所帮助。

问候，

【讨论】：

【解决方案2】：

您在初始化时使用过$(".slider").slider() $("#slider-result").slider() 在获取值时，某些插件适用于您在初始化时使用的选择器，所以试试吧。

【讨论】：

【解决方案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
});

【讨论】：

【解决方案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);
  });
}

希望这行得通。

【讨论】：

事件处理程序在初始化滑块的脚本下方，滑块初始化不是异步的，所以它只会在滑块创建后添加，这不是问题。顺便说一句，您的答案中有语法错误var value = ui.value; , step

【解决方案5】：

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

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

问候

【讨论】：