如何使用鼠标选择一系列元素（例如日历日期范围选择器）？

Question

我想我的问题很简单。我正在用 Jquery 制作一个完整的日历。我想知道我该怎么做，就像我会在图片上展示的那样。用户选择了一个月的第 3 天（它将显示为蓝色），如果他将鼠标悬停在 8 上，则该范围内的所有数字都会得到一个类。所以.. 4,5,6,7,8 得到一些东西。如果他离开 8 并返回 7，则 8 没有添加类，应该删除。

日历显示了我的想法，我手动完成了：

日历显示我此时拥有： 

HTML

                <div class="new-calendar-inside">

                <div class="month-and-year-calendar">

                    <div class="left-arrow prev-month"></div>

                    <div class="month-year actual"></div>

                    <div class="right-arrow next-month"><i class="icon chevron right"></i>

                    </div>

                </div>

                <div class="calendar-days-list">

                    <table class="table table-bordered">

                        <tr class="days-of-the-week">

                            <th>S</th>

                            <th>T</th>

                            <th>Q</th>

                            <th>Q</th>

                            <th>S</th>

                            <th>S</th>

                            <th>D</th>

                        </tr>

                    </table>

                </div>

            </div>

            <div class="calendar-buttons">

                <button class="new-button no-border-button">Cancelar</button>

                <button id="confirm" class="new-button no-border-button">Ok</button>

            </div>

        </div>

查询

this.getCalendarTable().on("click", "td", function () {

        var row = _this.getCalendarTable().find(".selected");

        var rowOrange = _this.getCalendarTable().find(".selected-orange");

        var table = _this.getCalendarTable();

        if (_this.getContainer().find(".new-calendar.simple").hasClass("mini")) {

可能我需要在鼠标悬停时获得最后一个位置，但我不知道该怎么做。

Answer 1

不要因为您遇到的确切原因而使用 mouseover 和 mouseout。而是在鼠标事件期间跟踪开始和结束索引。然后简单地比较每天是否在该范围之间。如果用户以相反的顺序选择，请确保考虑到end可能是 <&nbsp;start。还要确保考虑鼠标在没有特定日期悬停时可能会被释放。1 单击/拖动：let div = document.querySelector('div');for (let i = 0; i < 31; i++) {&nbsp; let span = document.createElement('span');&nbsp; span.textContent = i + 1;&nbsp; div.appendChild(span);&nbsp; span.addEventListener('mousedown', () => beginSelection(i));&nbsp; span.addEventListener('mousemove', () => updateSelection(i));&nbsp; span.addEventListener('mouseup', () => endSelection(i));}document.addEventListener('mouseup', () => endSelection());let selecting, start, end;let beginSelection = i => {&nbsp; selecting = true;&nbsp; start = i;&nbsp; updateSelection(i);};let endSelection = (i = end) => {&nbsp; updateSelection(i);&nbsp; selecting = false;};let updateSelection = i => {&nbsp; if (selecting)&nbsp; &nbsp; end = i;&nbsp; [...document.querySelectorAll('span')].forEach((span, i) =>&nbsp; &nbsp; span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));};div {&nbsp; display: flex;&nbsp; width: 200px;&nbsp; flex-wrap: wrap;}span {&nbsp; width: 30px;&nbsp; border: 1px solid;&nbsp; padding: 5px;&nbsp; user-select: none;}span.selected {&nbsp; background: #adf;}span:hover:not(.selected) {&nbsp; background: #cfefff;}<div><div>2次点击：let div = document.querySelector('div');for (let i = 0; i < 31; i++) {&nbsp; let span = document.createElement('span');&nbsp; span.textContent = i + 1;&nbsp; div.appendChild(span);&nbsp; span.addEventListener('click', () => toggleSelection(i));&nbsp; span.addEventListener('mousemove', () => updateSelection(i));}let selecting, start, end;let toggleSelection = i => {&nbsp; if (selecting)&nbsp; &nbsp; endSelection(i);&nbsp; else&nbsp; &nbsp; beginSelection(i);};let beginSelection = i => {&nbsp; selecting = true;&nbsp; start = i;&nbsp; updateSelection(i);};let endSelection = (i = end) => {&nbsp; updateSelection(i);&nbsp; selecting = false;};let updateSelection = i => {&nbsp; if (selecting)&nbsp; &nbsp; end = i;&nbsp; [...document.querySelectorAll('span')].forEach((span, i) =>&nbsp; &nbsp; span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));};div {&nbsp; display: flex;&nbsp; width: 200px;&nbsp; flex-wrap: wrap;}span {&nbsp; width: 30px;&nbsp; border: 1px solid;&nbsp; padding: 5px;&nbsp; user-select: none;}span.selected {&nbsp; background: #adf;}span:hover:not(.selected) {&nbsp; background: #cfefff;}<div>&nbsp; <div>