Отображение переменной JQuery в HTML

Question

Я использовал jQuery Datepicker в течение некоторого времени для ввода двух дат («ArrivalDate» и «DepartureDate»). Теперь я пытаюсь адаптировать текущую страницу, чтобы показать разницу между ними. Это должно быть показано (jQuery slideDown) после ввода второй даты.

Мой HTML является

<form action="tba.php" method="post" id="bookform" name="bookform"> 
    <table cellspacing="3px" width="100%" border="0"> 
     <tr> 
      <td align="right"> 
<b>Arrival Date: </b> 

      </td> 
      <td> 
       <input name="ArrivalDate" id="ArrivalDate" size="10"> 
      </td> 
     </tr> 
     <tr> 
      <td align="right"> 
<b>Departure Date: </b> 

      </td> 
      <td> 
       <input name="DepartureDate" id="DepartureDate" size="10"> 
      </td> 
     </tr> 
    </table> 
    <div id="numnights" style="display:none"> 
     <table cellspacing="3px" width="100%" border="0"> 
      <tr> 
       <td align="right" width="48.5%">&nbsp;</td> 
       <td>That's <span id="nights"></span> nights in total</td> 
      </tr> 
     </table> 
    </div> 
</form> 

и JQuery является

$(document).ready(function() { 

    //jQuery UI datepicker 
    $("#ArrivalDate").datepicker({ 
     dateFormat: "d M yy", 
     minDate: 0, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     onClose: function() { 
      var DepDate = $('#DepartureDate'); 
      var limitDate = $(this).datepicker('getDate'); 
      //add 1 day to Arrival Date 
      limitDate.setDate(limitDate.getDate() + 1); 
      DepDate.datepicker('option', 'minDate', limitDate); 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 

    $('#DepartureDate').datepicker({ 
     dateFormat: "d M yy", 
     showOtherMonths: true, 
     selectOtherMonths: true 
    }); 

    //Reveal number of nights 
    $("#DepartureDate").on("change", function() { 
     var arr_date = $("#ArrivalDate").datepicker('getDate'); 
     var dep_date = $("#DepartureDate").datepicker('getDate'); 
     var diff = Math.floor((dep_date.getTime() - arr_date.getTime())/86400000); 
     $('#nights').val(diff); 
     $("#numnights").hide().slideDown(1200); 
    }); 
}); 

Demo

У меня есть проблема в том, что диапазон (ID = ночей) всегда пусто. Я попытался подставить другие элементы: входные работы p не работает

Как я могу убедить его показать фрагмент текста «Всего 5 ночей»?

Answer 1

.

$('#nights') выбирает элемент <span id="nights"></span>. Только входные данные формы имеют метод .val(). Что вы ищете является .text(), который используется для вставки текстовых узлов в

$('#nights').text(diff); 

Обратите внимание, что .html() будет работать, а

$('#nights').html(diff); 

Но, .html() вызывает значение, которое будет предоставляться в качестве HTML, который может быть немного медленнее просто потому, что его нужно отправить в парсер HTML, но это не будет заметно.

Answer 2

Вы должны использовать .text() для пролете и не .val():

$('#nights').text(diff); 

Demo

См Difference between val() and text() для справки

Answer 3

Вы можете использовать .html(), чтобы добавить этот текст в

Answer 4

просто использовать

$(".element").text(jQuery element here);