javascript - 错误 : cannot call methods on slider prior to initialization attempted to call method 'value'

Question

我写了类似下面的内容。 onclick of div with id "PLUS"我 我收到以下错误:

无法在初始化尝试调用方法“值”之前调用 slider 上的方法

<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 插件 初始化之前调用 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>

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

问候，