3

我写了类似下面的东西。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>

任何帮助表示赞赏。

4

5 回答 5

5

如果我们详细检查错误，您会注意到它说您正在尝试在滑块插件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>

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

问候，

于 2016-05-20T11:55:56.973 回答
2

你$(".slider").slider()在初始化和 $("#slider-result").slider()获取值时使用了一些插件在你在初始化时使用的选择器上工作，所以试试看。

于 2013-05-17T06:09:41.250 回答
1

导致该错误的原因$("#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
});
于 2016-05-20T09:32:18.987 回答
0

我有一个类似的问题。你的街区在这里

$(".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 ) {}

IE。

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

希望这有效。

于 2013-07-25T04:42:04.987 回答
0

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

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

问候

于 2019-09-16T18:23:48.997 回答