-1
jQuery UI Datepickerを使用して、日付に基づくリゾートの可用性を更新しています。リゾートは外部のJSONファイルからロードされます。しかし、これは初めてのことですが、別の日付が選択されても前の結果はページに残っています。 divを空にして再投入する方法はありますか？変更後のdivを再入力してください
FORMWIDGETS.JS
$(document).ready(function() {
var p = [];
var output = "<section>";
var budget = $("#slider").val();
$("#datepicker").datepicker({
dateFormat: "dd/mm/yy"
});
var date = $("#datepicker").val();
$("#slider-range").slider({
range: true,
min: 100,
max: 10000,
values: [100, 1000],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$("#Destinations").selectmenu().selectmenu("menuWidget");
$("#Ratings").selectmenu().selectmenu("menuWidget");
$("input[type='radio']").checkboxradio({
icon: false
});
//var val = $('#slider-range').slider("option", "values")[0];
$("#datepicker").change(function() {
var img = new Image();
$("#results").empty();
$.getJSON('Holidays.json', function(data) {
for (var i in data.Resorts) {
if (date >= data.Resorts[i].startDate || date <= data.Resorts[i].endDate) {
output += "<h2>" + data.Resorts[i].name + "<a href='" + data.Resorts[i].url + "'>Take an In-Depth look</a> " + "</h2>" + "<img src='" + data.Resorts[i].picture + ".jpg'>" + "<article>" + "<p>" + data.Resorts[i].short_description + "</p><br>" + "<p>" + "Price:" + data.Resorts[i].price + "</p><br>" + "<p>Start Date:" + "<time datetime='" + data.Resorts[i].startDate + "'>" + data.Resorts[i].startDate + "</time></p><br>" + "<p>End Date: " + "<time datetime='" + data.Resorts[i].endDate + "'>" + data.Resorts[i].endDate + "</time></p>" + "</article>";
}
}
output += "</section>";
});
$("#results").append(output);
});
});
HTMLサイト
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find your Holiday!</title>
<meta name="description" content="">
<meta name="author" content="SitePoint">
<link rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="FormWidgets.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<form>
<label for="Destinations">Pick a Resort</label>
<select id="Destinations">
<option value="">Select one...</option>
<option value="Asia">Asia</option>
<option value="Alps">The Alps</option>
<option value="Europe">Europe</option>
<option value="Africa">Africa</option>
<option value="Carribean">Carribean</option>
<option value="The Americas">The Americas</option>
<option value="South America">South America</option>
</select>
<br>
<label for="datepicker">Date:</label>
<input type="text" id="datepicker">
<br>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</p>
<p style="font-weight:bold;">Activities:</p>
<label for="Spa">Spa</label>
<input type="radio" id="Spa" name="Spa" value="Spa">
<label for="WaterSkiing">WaterSkiing</label>
<input type="radio" id="WaterSkiing" name="WaterSkiing" value="WaterSkiing">
<br>
<label for="ScubaDiving">Scuba Diving</label>
<input type="radio" id="ScubaDiving" name="ScubaDiving" value="ScubaDiving">
<label for="Golf">Golf</label>
<input type="radio" id="Golf" name="Golf" value="Golf">
<br>
<label for="Tennis">Tennis</label>
<input type="radio" id="Tennis" name="Tennis" value="Tennis">
<label for="Snowboarding">Snowboarding</label>
<input type="radio" id="Snowboarding" name="Snowboarding" value="Snowboarding">
<br>
<label for="Sailing">Sailing</label>
<input type="radio" id="Sailing" name="Sailing" value="Sailing">
<label for="Horseriding">Horseriding</label>
<input type="radio" id="Horseriding" name="Horseriding" value="Horseriding">
<br>
<label for="Ratings">Choose a rating</label>
<select id="Ratings">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<button id="search">Search</button>
</form>
<button id="searchStorage">View Favourites</button>
<div id="Favourites"></div>
<div id="results"></div>
</body>
</html>
これは、古いものを置き換えるのではなく、新しい出力のみを追加する 'append'関数を使用しているためです。代わりに[html（）]（http://api.jquery.com/html/#html2）を試してください。 '$（"＃results "）のようになります。html（出力）;' –