jquery范围-未显示滑块
jquery范围-未显示滑块
提问于 2019-07-29 15:03:16
<!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>回答 2
Stack Overflow用户
发布于 2019-07-29 15:11:51
请按照下面的脚本进行尝试。它工作正常。
<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>
Stack Overflow用户
发布于 2019-07-30 09:56:52
它现在起作用了。所以问题出在调用(@RenderBody()) my index.html(上面的代码)的Layout.html文件中。Layout.html正在做@Scripts.Render("~/bundles/ jquery ")，我在index.html中创建了另一个jquery链接，这是多余的，而且我需要的jquery不能链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57248645
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号