我有一个使用 JQUERY 在 HTML 网页中创建滑块的代码，但它不工作请帮助我以下是该代码。我检查了所有正确的 JS 路径。我已经分离了要检查的滑块代码并且它工作但当我将它集成到以下代码中时它不起作用。
<html>
<head>
<meta charset="utf-8">
<link href="tms_style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.ui.all.css">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="../script.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="js_includes/development-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="js_includes/development-bundle/demos/demos.css">
<script src="js_includes/development-bundle/ui/jquery.ui.position.js"></script>
<script src="js_includes/development-bundle/ui/jquery.ui.autocomplete.js"></script>
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<style>
.ui-autocomplete-loading { background: white url('js_includes/development-bundle/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 16000,
values: [2000, 9000],
slide: function(event, ui) {
$("#amountMin").val(ui.values[0]);
$("#amountMax").val(ui.values[1]);
}
});
$("#amountMin").val($("#slider-range").slider("values", 0));
$("#amountMax").val($("#slider-range").slider("values", 1));
});
</script>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$.ajax({
url: "AllResponse.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "Hotel", xmlResponse ).map(function() {
return {
value: $( "CityCode", this ).text() + ", " +
( $.trim( $( "CityName", this ).text() ) || "(unknown country)" ),
id: $( "CityCode", this ).text()
};
}).get();
$( "#txtCity" ).autocomplete({
source: data,
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + ", CityCode: " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
}
});
});
</script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "AllResponse.xml",
dataType: "xml",
success: parseXml
});
function parseXml(document) {
cnt = 1;
var count = $(document).find("Hotel").each(function() {
}).length;
var Hotel = $(document).find("Hotel")
Hotel.sort(function(a, b) {
return (parseInt($(a).find('Property').attr('MinimumRate')) - parseInt($(b).find('Property').attr('MinimumRate')));
});
Hotel.each(function(i, v) {
var title = $(v).find('OptionNo').text()
var start = $(v).find('StayDateRange').attr('Start')
var end = $(v).find('StayDateRange').attr('End')
var Hotelname = $(v).find('Property').attr('HotelName')
var CityName = $(v).find('CityName').text()
var Address1 = $(v).find('Address1').text()
var Address2 = $(v).find('Address2').text()
var hotelimage = $(v).find('HotelFrontImage').attr('Url')
var MinRate = $(v).find('Property').attr('MinimumRate')
var Currency = $(v).find('Property').attr('Currency')
var NumberOfRooms = $(v).find('ManagementFeesDetails').text()
var NumberOfRooms1 = $(v).find('Rooms').find('Room').attr('NumberOfRooms')
var fullLink = '<div id="Hotel_details"> <div id="discounts_and_offers">Book 3 Days In Advance And Get 15% Discount</div> <div id="hotel_image"><img src="' + hotelimage + '"/></div> <div id="hotel_view"><table height="100%" width="100%" cellpadding="0" cellspacing="0" ><tr><td height="89" ><div id="discount_rate">INR 8,325</div><div id="room_rate">' + Currency + ' ' + MinRate + '</div> Lowest room price <br />per night </td><tr><td height="39" ><img src="images/view_room.png" width="115" height="36" /></td> </tr></table></div><div id="middle_div"><table width="100%" cellpadding="0" cellspacing="0" ><tr><td height="94"><div id="hotel_information"><div id="hotel_header">' + Hotelname + '-' + CityName + '</div><div id="hotel_star_rating"><img src="images/star_rating.png" width="73" height="19" /></div><div id="hotel_info">' + Address1 + '<br>' + Address2 + '</div></div><div id="hotel_inclusions"><img src="images/inclusion1.jpg" width="17" height="16" /><img src="images/inclusion2.jpg" width="17" height="16" /><img src="images/inclusion3.jpg" width="17" height="16" /><img src="images/inclusion4.jpg" width="17" height="16" /><br /><img src="images/inclusion5.jpg" width="17" height="16" /><img src="images/inclusion6.jpg" width="17" height="16" /><img src="images/inclusion7.jpg" width="17" height="16" /><img src="images/inclusion8.jpg" width="17" height="16" /></div></td></tr><tr><td height="27"><div id="hotel_links"><ul><li>Details</li><li>|</li><li>Photos</li><li>|</li><li>Map</li></ul></div></td></tr></table></div>' + NumberOfRooms1 + '</div>';
$("#content").append(fullLink);
cnt = cnt + 1;
//alert("Option is: " + $(v).find('OptionNo').text() + " Minimum Rate is " + $(v).find('Property').attr('MinimumRate') + " Call is " + $(v).find('Property').attr("Currency"));
});
paging(count);
}
});
function paging(count1) {
var show_per_page = 8;
var number_of_items = count1;
var number_of_pages = Math.ceil(number_of_items / show_per_page);
var current_link = 0;
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
$("<a href='#'>Prev </a>").click(previous).appendTo("#page_navigation");
while (number_of_pages > current_link) {
$("<a href='#' class='page_link'>").text(++current_link + ' ').click(go_to_page).appendTo("#page_navigation")
}
$("<a href='#'> Next</a> ").click(next).appendTo("#page_navigation");
$('#page_navigation .page_link:first').addClass('active_page');
$('#content').children().hide().slice(0, show_per_page).show();
function previous(e) {
e.preventDefault(); //Don't follow the link
$(".active_page").prev(".page_link").click();
}
function next(e) {
e.preventDefault();
$(".active_page").next(".page_link").click();
}
function go_to_page(e) {
e.preventDefault();
//Get the zero-based index instead of using an attribute
var page_num = $(this).index(".page_link");
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().hide().slice(start_from, end_on).show();
//Since this always points to the page link, use that instead of looking for it
$(this).addClass("active_page").siblings(".active_page").removeClass("active_page");
}
}
function getXml() {
var city=document.getElementById("txtCity").value;
var checkin=document.getElementById("datepicker1").value;
var checkout=document.getElementById("datepicker2").value;
var sortBy = $("#sortBy").val();
$.ajax({
type: "GET",
url: "AllResponse.xml",
dataType: "xml",
success: parseXml2
});
function parseXml2(document) {
$("#content").text("");
$("#page_navigation").text("");
cnt = 0;
var count = $(document).find("Hotel").each(function() {
}).length;
if (sortBy == 1) {
var Hotel = $(document).find("Hotel")
Hotel.sort(function(a, b) {
return (parseInt($(a).find('Property').attr('MinimumRate')) - parseInt($(b).find('Property').attr('MinimumRate')));
});
}
else {
var Hotel = $(document).find("Hotel")
Hotel.sort(function(a, b) {
return (parseInt($(b).find('Property').attr('MinimumRate')) - parseInt($(a).find('Property').attr('MinimumRate')));
});
}
Hotel.each(function(i, v) {
// Criteria Find For Only Hotels
var title = $(v).find('OptionNo').text()
var start = $(v).find('StayDateRange').attr('Start')
var end = $(v).find('StayDateRange').attr('End')
var Hotelname = $(v).find('Property').attr('HotelName')
var CityName = $(v).find('CityName').text()
var Address1 = $(v).find('Address1').text()
var Address2 = $(v).find('Address2').text()
var hotelimage = $(v).find('HotelFrontImage').attr('Url')
var MinRate = $(v).find('Property').attr('MinimumRate')
var Currency = $(v).find('Property').attr('Currency')
var NumberOfRooms = $(v).find('ManagementFeesDetails').text()
var NumberOfRooms1 = $(v).find('Rooms').find('Room').attr('NumberOfRooms')
//**************************************************************
// Criteria Find For Hotel Rooms
if (CityName == city.toUpperCase() && start >= checkin && end <= checkout) {
cnt = cnt + 1;
var fullLink = '<div id="Hotel_details"> <div id="discounts_and_offers">Book 3 Days In Advance And Get 15% Discount</div> <div id="hotel_image"><img src="' + hotelimage + '" /></div> <div id="hotel_view"><table height="100%" width="100%" cellpadding="0" cellspacing="0" ><tr><td height="89" ><div id="discount_rate">INR 8,325</div><div id="room_rate">' + Currency + ' ' + MinRate + '</div> Lowest room price <br />per night </td><tr><td height="39" ><img src="images/view_room.png" width="115" height="36" /></td> </tr></table></div><div id="middle_div"><table width="100%" cellpadding="0" cellspacing="0" ><tr><td height="94"><div id="hotel_information"><div id="hotel_header">' + Hotelname + '-' + CityName + '</div><div id="hotel_star_rating"><img src="images/star_rating.png" width="73" height="19" /></div><div id="hotel_info">' + Address1 + '<br>' + Address2 + '</div></div><div id="hotel_inclusions"><img src="images/inclusion1.jpg" width="17" height="16" /><img src="images/inclusion2.jpg" width="17" height="16" /><img src="images/inclusion3.jpg" width="17" height="16" /><img src="images/inclusion4.jpg" width="17" height="16" /><br /><img src="images/inclusion5.jpg" width="17" height="16" /><img src="images/inclusion6.jpg" width="17" height="16" /><img src="images/inclusion7.jpg" width="17" height="16" /><img src="images/inclusion8.jpg" width="17" height="16" /></div></td></tr><tr><td height="27"><div id="hotel_links"><ul><li>Details</li><li>|</li><li>Photos</li><li>|</li><li>Map</li></ul></div></td></tr></table></div></div>';
$("#content").append(fullLink);
}
else if (city == "" || checkin == "" || checkout == "") {
cnt = cnt + 1;
var fullLink = '<div id="Hotel_details"> <div id="discounts_and_offers">Book 3 Days In Advance And Get 15% Discount</div> <div id="hotel_image"><img src="' + hotelimage + '" /></div> <div id="hotel_view"><table height="100%" width="100%" cellpadding="0" cellspacing="0" ><tr><td height="89" ><div id="discount_rate">INR 8,325</div><div id="room_rate">' + Currency + ' ' + MinRate + '</div> Lowest room price <br />per night </td><tr><td height="39" ><img src="images/view_room.png" width="115" height="36" /></td> </tr></table></div><div id="middle_div"><table width="100%" cellpadding="0" cellspacing="0" ><tr><td height="94"><div id="hotel_information"><div id="hotel_header">' + Hotelname + '-' + CityName + '</div><div id="hotel_star_rating"><img src="images/star_rating.png" width="73" height="19" /></div><div id="hotel_info">' + Address1 + '<br>' + Address2 + '</div></div><div id="hotel_inclusions"><img src="images/inclusion1.jpg" width="17" height="16" /><img src="images/inclusion2.jpg" width="17" height="16" /><img src="images/inclusion3.jpg" width="17" height="16" /><img src="images/inclusion4.jpg" width="17" height="16" /><br /><img src="images/inclusion5.jpg" width="17" height="16" /><img src="images/inclusion6.jpg" width="17" height="16" /><img src="images/inclusion7.jpg" width="17" height="16" /><img src="images/inclusion8.jpg" width="17" height="16" /></div></td></tr><tr><td height="27"><div id="hotel_links"><ul><li>Details</li><li>|</li><li>Photos</li><li>|</li><li>Map</li></ul></div></td></tr></table></div></div>';
$("#content").append(fullLink);
}
});
//alert(cnt);
paging(cnt);
}
}
</script>
</head>
<body>
<div class="demo">
<div id="sarchBox">
<form name="frmSearch" id="frmSearch" method="post">
<label for="txtCity">City : </label>
<input id="txtCity" type="text" />
Check-In: <input type="text" id="datepicker1">
Check-Out: <input type="text" id="datepicker2">
<input type="button" id="search" value="search" onClick="getXml();" />
</form>
</div>
<input type="hidden" id="current_page" />
<input type="hidden" id="show_per_page" />
<div>Sort By Price: <select id="sortBy" onChange="getXml();">
<option value="1" >Low To Heigh</option>
<option value="2">Heigh To Low</option></select></div>
<b style="font-size:medium;">Price Range:</b><br>
<div id="slider-range"></div>
<b style="font-size:small;">Rs:</b>
<input type="text" id="amountMin" size="19" readonly="readonly" style="font-size:small; border:0; color:#f6931f; background-color:#DEDEDE; font-weight:bold;" />
<b style="font-size:small;">Rs:</b>
<input type="text" id="amountMax" size="4" readonly="readonly" style="font-size:small; border:0; color:#f6931f; font-weight:bold; background-color:#DEDEDE;" />
</div>
<ul id="content"></ul>
<div id="page_navigation" ></div>
</body>
</html>
以下是上面滑块的代码
<script>
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 16000,
values: [2000, 9000],
slide: function(event, ui) {
$("#amountMin").val(ui.values[0]);
$("#amountMax").val(ui.values[1]);
}
});
$("#amountMin").val($("#slider-range").slider("values", 0));
$("#amountMax").val($("#slider-range").slider("values", 1));
});
</script>