javascript - JQuery 在 JS 中不显示

Question

我一直在使用 JQuery 在 JS 中制作一个 slider 作为时间选择器，并试图在我的 PHP 脚本中显示它。我一直在按照这些说明进行操作，第一部分工作得很好。现在当我去添加下一个阶段时，它不再显示了。有什么想法吗？

说明链接:

http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/

这是我的代码:

<script>
$(function() {
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $('#slider-range').slider('values', 0),
    val1 = $('#slider-range').slider('values'', 1),
    minutes0 = parseInt(val0 % 60, 10),
    hours0 = parseInt(val0 / 60 % 24, 10),
    minutes1 = parseInt(val1 % 60, 10),
    hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#time').text(startTime + ' - ' + endTime);
}
function getTime(hours, minutes) {
    var time = null;
    minutes = minutes + "";
    if (hours < 12) {
        time = 'AM';
    }
    else {
        time = 'PM';
    }
    if (hours == 0) {
        hours = 12;
    }
    if (hours > 12) {
        hours = hours - 12;
    }
    if (minutes.length == 1) {
        minutes = '0' + minutes;
    }
    return hours + ':' + minutes + ' ' + time;
}
slideTime();
});
</script>

<script>
$(function() {
$( '#datepicker' ).datepicker({ dateFormat: 'yy-mm-dd' });
});

</script>
<?php
//settings
echo "<hr style='border: 1px solid #800000'><h3>Settings</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Date Selector</td><td><h4>Group Selector</td></tr>";
echo "<tr><td><input type='text' id='datepicker' name='date' value='Select a date...'  onchange='this.form.submit()'></form></td>";
echo "</select></form></td></tr>";
echo "</table>";
if (isset($_GET['date'])) {
    $date = $_GET['date'];
    }
else {
    $date = date("Y-m-d");
    }
//boat booking
echo "<hr style='border: 1px solid #800000'><h3>Book Boats - ".$date."</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Time Selector<h4></td></tr>";
echo "</table>";
echo "<div class='slider' id='slider-range'></div>";
//logging
echo "<hr style='border: 1px solid #800000'><h3>Boat Usage</h3>";

提前致谢!

Answer 1

您应该删除以下行中的多余引号 ':

val1 = $('#slider-range').slider('values'', 1);

应该是:

val1 = $('#slider-range').slider('values', 1);

如果您可以使用 change 而不是 slider 来调整时间，那就更好了。

$( '#slider-range' ).slider({ 
  range: true, 
  min: 0, 
  max: 839, 
  values: [ 60, 210 ], 
  step: 30,
  change: slideTime
}); 

function slideTime( event, ui){
  var val0 = $('#slider-range').slider('values', 0), 
      val1 = $('#slider-range').slider('values', 1), 
      minutes0 = parseInt(val0 % 60, 10), 
      hours0 = parseInt(val0 / 60 % 24, 10), 
      minutes1 = parseInt(val1 % 60, 10), 
      hours1 = parseInt(val1 / 60 % 24, 10); 

  startTime = getTime(hours0, minutes0); 
  endTime = getTime(hours1, minutes1); 

  $('#stime').text(startTime); 
  $('#etime').text(endTime); 
}
function getTime(hours, minutes) { 
  var time = null; 
  minutes = minutes + "";

  if (minutes.length == 1) { 
    minutes = '0' + minutes; 
  } 
  hours = hours +8; 
  return hours + ':' + minutes; 
} 

slideTime();

#slider-range{
  width:300px;
  margin-top:10px;
}
body {
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<h1>HTML Slider Test</h1>

<div id="slider-range"></div>

<div id="stime"></div>
<div id="etime"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>

希望这对您有所帮助。