我正試圖讓JQuery UI在我的HTML頁面上作業，但沒有成功。特別是我想使用范圍滑塊，但無法在頁面上顯示任何東西。我已經下載了JQuery UI檔案夾并將其匯入到我的代碼檔案中。
<! DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
<link rel="styleheet" href="/styles。 css" />
<link rel="styleheet" href="https://cdnjs. cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel=" stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all. css" integrity="sha384-"。 AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<link rel="preconnect"/span> href="https://fonts. googleapis.com">
<link rel="preconnect"/span> href="https://fonts. gstatic.com"crossorigin>
<link href="https://fonts.googleapis. com/css2?family=Noto Sans:wght@400;700&display=swap" rel="styleheet">
<link rel="styleheet" href="/jquery-ui-1. 12.1.custom/jquery-ui.min.css">
<script src="/jquery-ui-1. 12.1.custom/external/jquery/jquery.js"></script>
<script src="/jquery-ui-1. 12.1.custom/jquery-ui.min.js"></script>/span>
<script>
$( function() {
$( "#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300] 。
slide: function( event, ui ) {
$( "#amount" ).val( "$" ui。 values[ 0 ] " - $" ui.values[ 1 ] ）。)
}
});
$( "#amount" ).val( "$" $( "#slider-range" ) 。 slider( "values", 0 ) 。
" - $" $( "#slider-range" ).slider( "value", 1 ) );
} );
</script>>
</head>
<body>
<section class = "nav-bar" > </section>>
<p>
<label for="金額">價格范圍。 </label>
< input type="text"/span> id="金額" 只讀 style="邊界。 0; color:#f6931f; font-weight:bold;">
</p>/span>
<div id="slider-range"/span>> </div>>
</section>
非常感謝任何人在這方面的幫助！
uj5u.com熱心網友回復：
自定義的jQuery腳本會導致問題。我評論了你的，并添加了默認的js和缺少的css。(最好把腳本移到頁腳)
。<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
<link rel="styleheet" href="/styles。 css" />
<link rel="styleheet" href="https://cdnjs. cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel=" stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all. css" integrity="sha384-"。 AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<link rel="preconnect"/span> href="https://fonts. googleapis.com">
<link rel="preconnect"/span> href="https://fonts. gstatic.com"crossorigin>
<link href="https://fonts.googleapis. com/css2?family=Noto Sans:wght@400;700&display=swap" rel="styleheet">
<!-- my Styles start -->
<link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- my Styles end -->
<link rel="styleheet" href="/jquery-ui-1. 12.1.custom/jquery-ui.min.css">
<!-- my jQuery start -->
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<!-- my jQuery end -->
<!-- my Script start -->/span>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- my Script end -->
<!-- <script src="/jquery-ui-1.12.1.custom/external/jquery/jquery.js"> </script> -->
<!-- <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> -->
<script>
$( function() {
$( "#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300] 。
slide: function( event, ui ) {
$( "#amount" ).val( "$" ui。 values[ 0 ] " - $" ui.values[ 1 ] ）。)
}
});
$( "#amount" ).val( "$" $( "#slider-range" ) 。 slider( "values", 0 ) 。
" - $" $( "#slider-range" ).slider( "value", 1 ) );
} );
</script>>
</head>
<body>
<section class = "nav-bar" > </section>>
<p>
<label for="金額">價格范圍。 </label>
< input type="text"/span> id="金額" 只讀 style="邊界。 0; color:#f6931f; font-weight:bold;">
</p>/span>
<div id="slider-range"/span>> </div>>
</body>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331074.html
標籤：