在 HTML 中显示 Jquery 个变量

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=nights) 始终为空白。我试过用其他元素代替：输入作品 p 不起作用

我怎样才能说服它显示一段文字 "That's 5 nights in total"？

Answer 1

您应该使用 .text() 作为跨度而不是 .val():

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

Demo

参考Difference between val() and text()

Answer 2

您可以使用 .html() 添加该文本。

Answer 3

$('#nights') 选择 <span id="nights"></span> 元素。只有表单输入有 .val() 方法。您正在寻找的是 .text() 用于将文本节点插入

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

请注意 .html() 也可以

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

但是，.html() 导致值呈现为 HTML，这可能会稍微慢一些，因为它必须发送到 HTML 解析器，但它不会引人注目。

Answer 4

只需使用

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

在 HTML 中显示 Jquery 个变量

Showing Jquery Variable in HTML

html

jquery

jquery-ui

datepicker