我在Rails ERB页面上有一个简单的JQuery滑块。我正试图在变化时发出警报,但事实并非如此。
对于它的价值,滑块确实有效。
我已将此代码放在home.html.erb中。
谁能告诉我哪里出错?
<html>
<head>
<style media="screen" type="text/css">
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body, p {
font-family: Helvetica, Arial;
}
</style>
<!-- Load jQuery and jQuery UI -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load the jQuery UI CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- jQuery UI Slider code -->
<script>
// When the browser is ready...
$(function() {
// Create a new jQuery UI Slider element
// and set some default parameters.
$( "#slider" ).slider({
range: "min",
value: 50,
min: 20,
max: 300,
slide: function( event, ui ) {
// While sliding, update the value in the #amount div element
$( "#amount" ).html( ui.value );
},
change: function (event, data) {
alert(data.value)
}
});
// Set the initial slider amount in the #amount div element
var value = $( "#slider" ).slider( "value" );
$( "#amount" ).html( value );
});
</script>
</head>
<body>
<!-- The div that is used as the slider container -->
<div id="slider" style="margin-top:100px;"></div>
<br /><br /><br />
<!-- The div that is used to display the slider value -->
<div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>
</body>