gpt4 book ai didi

javascript - jquery ui 小部件显示为文本输入

转载 作者:行者123 更新时间:2023-12-03 12:13:26 27 4
gpt4 key购买 nike

我正在尝试制作一个像这样的范围小部件 http://jqueryui.com/slider/#range 。我已经复制了源代码,它会产生文本输入而不是 slider 。这是我正在使用的代码。我还将样式属性移至链接的 css 文件中。这样做,输出从无变为文本输入。

这是我的头:

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="../jscript/questions.js"></script>
<script>
jQuery.noConflict()
$(function() {
$('#slider-range').slider({
range: true,
min: 25,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
jQuery( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,900,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../CSS/questions.css">
</head>

这是小部件的 html:

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" >
</p>

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

这是 CSS:

#slider-range{
border:0;
color:#f6931f;
font-weight:bold;
}

谢谢!

最佳答案

您的问题源于声明 jQuery.noConflict()

这样做后,您将无法再使用 $ 直接访问 jQuery

如果您需要noConflict,您可以通过更改来修复代码:

jQuery.noConflict()
$(function() {

jQuery.noConflict()
jQuery(function($) {/* "$" argument allows using "$" inside the ready handler*/

Working demo of your code

了解如何使用浏览器控制台检查错误。您应该会看到“$”未定义或类似的错误,具体取决于浏览器

关于javascript - jquery ui 小部件显示为文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24845979/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com