javascript - 将变量分配给输入值

Question

在 Jquery 脚本中，如下所示。详细信息的元素是在 jquery 函数内动态创建的。但是，当将变量“startLocation”的值分配给输入“detail_startLocation[]”时，该值未完全分配。似乎只是第一个词。

例如，“startLocation”的值为“Grand Hyatt”，但“detail_StartLocation[]”的值仅显示“Grand”。当警告变量时，它返回完整值。有谁知道出了什么问题吗？

var startLocation = jQuery("#txtStartLocation").val();
    var endLocation = jQuery("#txtEndLocation").val();
    var date2 = jQuery.datepicker.formatDate("DD, MM d, yy", new Date(jQuery("#txtStartDate").val()));

    for(i=1; i<= n_day;i++){

        var detail = '<div>&nbsp;</div>'
                    +'<div><h4>Day-'+i+' : '+date2+'</h4></div>'
                    +'<div class="table">'
                        +'<div class="tr">'
                            +'<div class="td">&nbsp;</div>'
                            +'<div class="td">Start</div>'
                            +'<div class="td">End</div>'
                        +'</div>'
                        +'<div class="tr">'
                            +'<div class="td">Travel time</div>'
                            +'<div class="td"><input type="text" name="detail_startTime[]" value= '+startTime+' /></div>'
                            +'<div class="td"><input type="text" name="detail_endTime[]" value= '+endTime+' /></div>'
                        +'</div>'
                        +'<div class="tr">'
                            +'<div class="td">Location</div>'
                            +'<div class="td"><input type="text" size="100" name="detail_startLocation[]" value= '+startLocation+' /></div>'
                            +'<div class="td"><input type="text" name="detail_endLocation[]" value= '+endLocation+' /></div>'
                        +'</div>'
                    +'</div>';

        jQuery("#detail").append(detail);
        date2 = new Date(jQuery("#txtStartDate").val());
        date2.setDate(startDate.getDate() + i);
        date2 = jQuery.datepicker.formatDate("DD, MM d, yy", new Date(date2));
    }

Answer 1

您插入的值不带引号 (")。在 HTML 中，每个不包含纯单词字符的值都必须用引号引起来(例如 value= “君悦酒店” 而不是 value=君悦酒店)。

仅添加引号可能还不够。由于多种原因，您应该正确转义这些值。由于您已经在使用 jQuery，我建议使用库的 .val 函数将值插入到 DOM 中。你可以这样做:

// Wrap HTML code in jQuery instance for later modifications
var detail = $('<div>&nbsp;</div>'
            +'<div><h4>Day-'+i+' : '+date2+'</h4></div>'
            +'<div class="table">'
                +'<div class="tr">'
                    +'<div class="td">&nbsp;</div>'
                    +'<div class="td">Start</div>'
                    +'<div class="td">End</div>'
                +'</div>'
                +'<div class="tr">'
                    +'<div class="td">Travel time</div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_startTime[]" class="start-time" value="" /></div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_endTime[]" class="end-time" value="" /></div>'
                +'</div>'
                +'<div class="tr">'
                    +'<div class="td">Location</div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" size="100" name="detail_startLocation[]" class="start-location" value="" /></div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_endLocation[]" class="end-location" value="" /></div>'
                +'</div>'
            +'</div>');

// Update value attributes
detail.find('input.start-time').val(startTime);
detail.find('input.end-time').val(endTime);
detail.find('input.start-location').val(startLocation);
detail.find('input.end-location').val(endLocation);
// Append to "real" DOM
jQuery("#detail").append(detail);

首先，我们向输入元素添加一些 CSS 类，以便稍后选择它们。整个 HTML 代码包装在一个 jQuery 实例中，然后我们可以对其进行相应修改。