jQuery \ JavaScript - 无法更新元素的文本

时间:2022-11-13 17:45:37

This is pretty basic stuff, but I cant figure this out. I'm using jQuery's DatePicker. My goal is to display some text with the selected date. If the user chooses a date passed today's date, I'm changing the text to too late. When the user re-chooses a future date, I want to set the divs text to something and add the selected date inside a span which sits inside this div. All works except the future date is not appearing. Why?
What is the best practice when it comes to changing content of some element? Can I use jQuerys remove and then append?

这是非常基本的东西,但我无法弄清楚这一点。我正在使用jQuery的DatePicker。我的目标是显示一些包含所选日期的文本。如果用户选择今天通过的日期,我将文本更改为太晚。当用户重新选择将来的日期时,我想将div文本设置为某些内容,并将所选日期添加到位于此div内的范围内。除未来日期外的所有作品均未显示。为什么?改变某些元素的内容时,最佳做法是什么?我可以使用jQuerys删除然后追加?

HTML:

<p>Date: <input id="datepicker" type="text"></p>
<p id="we_will_start">starting at: <span id="start_date"></span></p>

JQUERY:

$('#datepicker').datepicker({
    onSelect: function(dateText, inst){ 
    var dateAsString = dateText;
    var selectedDateAsObject = $(this).datepicker('getDate');
    console.log("date object=" + new Date+ " jquery date=" + selectedDateAsObject);
    console.log(dateAsString);
    if(selectedDateAsObject < new Date){
        console.log("bad date. cant start yesterday fool");
         $("#we_will_start").text("too late!");
    }else{
        $("#we_will_start").text("will start at ");
         document.getElementById("start_date").innerHTML = dateAsString;
        }
    }
});

fiddle

1 个解决方案

#1


Try this, just concatenate the date string in your text.

试试这个,只需在文本中连接日期字符串即可。

$('#datepicker').datepicker({
    onSelect: function(dateText, inst){ 
    var dateAsString = dateText;
    var selectedDateAsObject = $(this).datepicker('getDate');
    console.log("date object=" + new Date+ " jquery date=" + selectedDateAsObject);
    console.log(dateAsString);
    if(selectedDateAsObject < new Date){
        console.log("bad date. cant start yesterday fool");
         $("#we_will_start").text("too late!");
    }else{
        $("#we_will_start").text("will start at " + dateAsString);
        }
    }
});

For the span, after you change the text to "too late" you overwritten all the elements inside the paragraph.

对于跨度,在将文本更改为“太晚”后,您将覆盖段落中的所有元素。

#1


Try this, just concatenate the date string in your text.

试试这个,只需在文本中连接日期字符串即可。

$('#datepicker').datepicker({
    onSelect: function(dateText, inst){ 
    var dateAsString = dateText;
    var selectedDateAsObject = $(this).datepicker('getDate');
    console.log("date object=" + new Date+ " jquery date=" + selectedDateAsObject);
    console.log(dateAsString);
    if(selectedDateAsObject < new Date){
        console.log("bad date. cant start yesterday fool");
         $("#we_will_start").text("too late!");
    }else{
        $("#we_will_start").text("will start at " + dateAsString);
        }
    }
});

For the span, after you change the text to "too late" you overwritten all the elements inside the paragraph.

对于跨度,在将文本更改为“太晚”后,您将覆盖段落中的所有元素。