2017-12-13 32 views
-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> 
+1

これは、古いものを置き換えるのではなく、新しい出力のみを追加する 'append'関数を使用しているためです。代わりに[html()](http://api.jquery.com/html/#html2)を試してください。 '$("#results ")のようになります。html(出力);' –

答えて

1

.empty()

説明:マッチしたセットのすべての子ノードを削除しますエレDOMのメンテ

要素からテキストを削除できない可能性があります。すべてのテキストと要素が確実に削除されるように、innerHTMLを削除します。

  1. 使用.html()をして""

これもネイティブに行うことができますにプロパティを使用.prop("innerHTML")""

  • にコンテンツを設定し、設定します。これは最高のjQueryを使って1〜2の方法で行われます。これはinnerHTMLが要素とテキストなしを含んでいないだろうことを確認します

    $("#results").html(""); 
    

    $("#results").empty(); 
    

    へ:

    私は変更をお勧めします。

  • 関連する問題