Question

让Jquery事件发挥作用有点麻烦。当滑块移动时，它应该使用滑块的值更新引用的字段。这目前无效

代码可以在下面找到，当它在jsfiddle链接工作时，它在第二个链接不起作用，你可以移动滑块，但它的值不显示。

请忽略#slider的双重启动。

我试图在jsfiddle中重现代码：

<html>
<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>


<script>
 $(function () {
  $('#slider').slider({

      value: 50,
      min: 10,
      max: 100,
      step: 10
  });

  $(document).on("click", "#show-slider", function () {
      $('#slide').toggle("slow");
  });
  });
  $("#slider").slider({
  slide: function (event, ui) {
      $("#slider-value").html(ui.value);
  },
  change: function (event, data) {
      alert(data.value)
  }
  });

  $("#slider-value").html($('#slider').slider('value'));</script>


<body>
<h5>You can alter the reading ease of the page using the slider below.<span id="show-    slider"> To toggle it click here.</span></h5>


<h5>The current Flesch reading ease score is at : <span id="slider-value"></span> </h5>

</div>
<div id="slide">
<br />
<div id="slider"></div>
<br />
<br />
</div>

</body>
</html>

其结果可在以下网址找到：

http://shavid.webfactional.com/

正如您所看到的，根据此处托管，它似乎不起作用，有任何建议吗？

Answer 1

我检查了你的网站，它工作了很多。

代码：

    $(function () {

      $('#slider').slider({
          value: 50,
          min: 10,
          max: 100,
          step: 10,
          slide: function (event, ui) {
              $("#slider-value").html(ui.value);
          },
          change: function (event, data) {
              alert(data.value)
              $("#slider-value").html($('#slider').slider('value'));
          }
      });

      $("#show-slider").click(function()
                              {
                                  $('#slide').toggle("slow");
                              });
   });

这里是Fiddle。我刚刚删除了其中一个滑块初始化

Answer 2

小提琴和你的网站之间的区别在于JSFiddle将代码包装在$(window).load(function(){ /*code here*/ });

中

JQuery Slider + Event的问题

2 个答案: