[英]jquery range-slider not appearing
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function () { $("#slider-3").slider({ range: true, min: 0, max: 24, values: [9, 18], slide: function (event, ui) { $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#price").val( $("#slider-3").slider("values", 0) + ":00" + " - " + $("#slider-3").slider("values", 1) + ":00"); }); </script> </head> <body> <!-- HTML --> <p> <label for="price">Email Working Timeframe</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p> <div id="slider-3"></div> </body> </html>
当我运行代码/时,滑块不会出现
我在jsfiddle上有代码,它可以正常工作,但是我不确定为什么我自己运行它时不起作用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function () {
$("#slider-3").slider({
range: true,
min: 0,
max: 24,
values: [9, 18],
slide: function (event, ui) {
$("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#price").val( $("#slider-3").slider("values", 0) + ":00" +
" - " + $("#slider-3").slider("values", 1) + ":00");
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for="price">Email Working Timeframe</label>
<input type="text" id="price"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>
</body>
</html>
我得到的唯一输出是“电子邮件工作时间表”
请根据以下脚本尝试。 它工作正常。
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <!-- HTML --> <p> <label for="price">Email Working Timeframe</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p> <div id="slider-3"></div> </body> <script> $(document).ready(function(){ $("#slider-3").slider({ range: true, min: 0, max: 24, values: [9, 18], slide: function (event, ui) { $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#price").val( $("#slider-3").slider("values", 0) + ":00" + " - " + $("#slider-3").slider("values", 1) + ":00"); }); </script> </html>
现在正在工作。 所以问题出在Layout.html文件中,该文件正在调用(@RenderBody())我的index.html(上面的代码)。 Layout.html正在执行@ Scripts.Render(“〜/ bundles / jquery”),我在index.html中建立了另一个jquery链接,这是多余的,而我需要的jquery无法链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.