Question

我试图在单击提交按钮之后但在实际提交表单之前，将表单中的jQuery datepicker输入元素的值更改为用户选择的日期所在星期的第一个日期。

我发现以下Javascript有效（使用.find()中的类选择器）：

$("form").submit( function(event) {
    $(this).closest('form').find('.week-picker').datepicker( "setDate", startDate );
    var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
    return;
});

startDate是一个Date对象。

但是此代码不起作用（在.find()中使用ID选择器）：

$("form").submit( function(event) {
    $(this).closest('form').find("#week-picker").datepicker( "setDate", startDate );
    var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
    return;
});

console.log($(this).closest('form').find(".week-picker").datepicker( "setDate", startDate ).val());生成一个正确的日期，例如06/27/2018。

console.log($(this).closest( 'form' ).find('#week-picker').val());产生undefined。

为什么会这样？ ID不是有效的选择器吗？

HTML：

<form action="/checkin" method="post">     
    <div class="form-group row mb-2">
        <div class="col-md-6 offset-md-3">
            <input class="week-picker form-control" type="text" id="week-picker" name="week_start" placeholder="Select week" style="opacity: 0;position: absolute;">
         </div>    
    </div>

    <div class="form-group row mt-4">
        <div class="col">
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
        </div>
    </div>
</form>

我的JS的datepicker部分：

var startDate;
var endDate;

var selectCurrentWeek = function() {
    window.setTimeout(function () {
    $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
                }, 1);
    }

    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $(this).closest( 'form' ).find('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $(this).closest( 'form' ).find('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
                    selectCurrentWeek();
         },
         beforeShowDay: function(date) {
                    var cssClass = '';
                    if(date >= startDate && date <= endDate)
                        cssClass = 'ui-datepicker-current-day';
                    return [true, cssClass];
         },
         onChangeMonthYear: function(year, month, inst) {
                    selectCurrentWeek();
         }
     });

   $(document).on( 'mousemove','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').addClass('ui-state-hover'); });
   $(document).on('mouseleave','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').removeClass('ui-state-hover'); });

Answer 1

#week-picker是有效的选择器，只要您的输入已分配了该ID。在您的情况下发生的事情是，有JS将您的输入转换为日期选择器，并且它在加载时更改了元素的ID。正如您从元素检查器中发布的那样，您的输入不再具有week-picker ID，现在是dp1529862475978。

这并不罕见，并且您得到的行为是预期的行为。如果您需要确保定位此日期选择器而不是另一个具有相同类的日期选择器，则可以使用name属性：

$("input[name='week_starting']")

在同一页面上，绝对不能有两个名称相同的输入，因此它与ID一样唯一。您在元素检查器中看到的ID可能是随机生成的，因此您不想使用它。

jQuery通过ID查找后代不起作用

1 个答案: