Question

我正在构建自己的日期范围选择器（我知道jQuery UI自己的日期选择器，它根本不符合我的需求）。

我正在使用on（'mouseover'）在已选择的入住日期和当前悬停日期之间选择日期范围：

function datepicker_live_selection_hover_css(checkin) {

        $('.datepicker-cal-wrapper table tbody tr td.datepicker-cal-available').on('mouseover', function () {

            var checkout_selected = datepicker_checkout_selected();

            if ( (checkin !== null) && (checkout_selected == false) ) {

                var hover_date = $(this).attr('data-date');

                $('.datepicker-cal-wrapper table tbody tr td').each (function() {

                    var date = $(this).attr('data-date');

                    if ( (date > checkin) && (date <= hover_date) || (date < checkin) && (date >= hover_date) ) {
                        $('.datepicker-cal-wrapper table tbody tr td[data-date="' + date + '"]').addClass('datepicker-cal-selected-date');
                    } else {
                        $('.datepicker-cal-wrapper table tbody tr td[data-date="' + date + '"]').removeClass('datepicker-cal-selected-date');
                    }

                });

            }

        });

    }

这工作正常，但速度非常慢且缓慢，我敢肯定必须有一种更好的方法来进行上述操作。目前，我正在使用foreach函数遍历所有表单元格。

有人能建议一种更有效的方法吗？

JSFiddle可以正常使用：https://jsfiddle.net/yfn1gLh5/

Answer 1

这里是一个示例，说明了如何实现。

注意：此功能还适用于其他表。运作方式：

获取用于保存表格的父元素
获取所有包含“ datepicker-cal-available”类的元素
获取当前元素和检入元素的索引
设置切片的开始和结束值，以便我们获取受影响的单元格的范围。
删除“ ..selected-date”类（清除），然后将该类添加到受影响的单元格中。

function datepicker_live_selection_hover_css(checkin) {

        $('.datepicker-cal-wrapper table tbody tr td.datepicker-cal-available').on('mouseover', function () {
            var checkout_selected = datepicker_checkout_selected();

            if ( (checkin !== null) && (checkout_selected == false) ) {

                var parent = $(this).closest(".datepicker-cal");
                var availableChildren = parent.find(".datepicker-cal-available");
                var checkInElement = parent.find('[data-date="' + checkin + '"]')[0];

                var idxOfCurrent = availableChildren.index($(this));
                var idxOfCheckIn = availableChildren.index(checkInElement);

                var idxStart = idxOfCheckIn > idxOfCurrent ? idxOfCurrent : idxOfCheckIn;
                var idxEnd = idxStart == idxOfCheckIn ? idxOfCurrent : idxOfCheckIn;
                var hoverChildren = availableChildren.slice(idxStart, idxEnd + 1 );

                availableChildren.removeClass('datepicker-cal-selected-date');
                hoverChildren.addClass('datepicker-cal-selected-date');
            }
        });
    }

我还简化了您的签入和签出功能。

function datepicker_checkin_selected() {
    var elements = $('.datepicker-cal-selected-checkin');
    return elements.length > 0;
}

function datepicker_checkout_selected() {
    var elements = $('.datepicker-cal-selected-checkout');
    return elements.length > 0;
}

jQuery获取两个单元格之间的表单元格范围

1 个答案: