javascript - 如何在 jquery val(val) 中回显文本？

Question

有一个jQuery代码：

(function($) {
$.fn.countdown = function(options) {
    var settings = { 'date': null };
    if(options) {
        $.extend(settings, options);
    }

    this_sel = $(this);

    function count_exec() {
        eventDate = Date.parse(settings['date']) / 1000;    // Parse the date string
        currentDate =   Math.floor($.now() / 1000);                 // Find the timestamp for now
        seconds = eventDate - currentDate;                  // Find the number of seconds remaining

        days =          Math.floor(seconds / (60 * 60 * 24));       // Divide to find the number of days remaining
        seconds -=      days * 60 * 60 * 24;                        // Subtract the number of (complete, => 24 hours) days calculated above

        hours =         Math.floor(seconds / (60 * 60));            // Get the number of hours from that modified number ^
        seconds -=      hours * 60 * 60;

        minutes =       Math.floor(seconds / 60);
        seconds -=      minutes * 60;

        this_sel.find('#days').val(days).trigger('change');
        this_sel.find('#hours').val(hours).trigger('change');
        this_sel.find('#mins').val(minutes).trigger('change');
        this_sel.find('#secs').val(seconds).trigger('change');

    } // End of count_exec();

    count_exec();

    interval = setInterval(count_exec, 1000);

} 
// End of the main function
}) (jQuery);

这里有一个 html 标记：

<input class="knob" id="days">
<input class="knob" id="hours">
<input class="knob" id="mins">
<input class="knob" id="secs">

我想在每个元素输出后添加文本。例如，在输入天数后，我想放置“剩余天数”。我怎样才能做到这一点 ？我想我应该编辑这些行：

            seconds = eventDate - currentDate;                  // Find the number of seconds remaining

        days =          Math.floor(seconds / (60 * 60 * 24));       // Divide to find the number of days remaining
        seconds -=      days * 60 * 60 * 24;                        // Subtract the number of (complete, => 24 hours) days calculated above

        hours =         Math.floor(seconds / (60 * 60));            // Get the number of hours from that modified number ^
        seconds -=      hours * 60 * 60;

        minutes =       Math.floor(seconds / 60);
        seconds -=      minutes * 60;

请查看这些图片以了解我在问
什么......代码现在显示的内容：

我想要展示的内容：

Answer 1

使用 jQuery after()或insertAfter()函数。

this_sel.find('#days').val(days).after('<span>Remaining Days</span>').trigger('change');

或者

$('<span>Remaining Days</span>').insertAfter(this_sel.find('#days'));

更新：

由于间隔调用源代码，因此after()或insertAfter()不适用于这种情况。

更好的解决方案是更改 HTML 并使用next()和html()或text()代替。新的 HTML：

<input class="knob" id="days"><span></span>
<input class="knob" id="hours"><span></span>
<input class="knob" id="mins"><span></span>
<input class="knob" id="secs"><span></span>

新的 jQuery 设置文本之后：

this_sel.find('#days').val(days).trigger('change').next().text('Remaining Days');

Answer 2

我不知道我是否完全理解了你的问题......

我会做这样的事情。

在使用所有函数后剩余的时间（你已经拥有的时间）你会在一个返回变量中得到它，例如时间

所以，你可以像这样创建其他 var

var text = "天"

并打印这样的东西$("myresult).val(time+"<br />"+text);