首頁猿問如何使用鼠標選擇一系列元素（例如日...

如何使用鼠標選擇一系列元素（例如日歷日期范圍選擇器）？

JavaScript

烙印99 2021-12-12 09:47:22

我想我的問題很簡單。我正在用 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")) {可能我需要在鼠標懸停時獲得最后一個位置，但我不知道該怎么做。

查看完整描述

1 回答

不負相思意

TA貢獻1777條經驗獲得超10個贊

不要因為您遇到的確切原因而使用 mouseover 和 mouseout。

而是在鼠標事件期間跟蹤開始和結束索引。然后簡單地比較每天是否在該范圍之間。

如果用戶以相反的順序選擇，請確保考慮到end可能是 < start。
還要確?？紤]鼠標在沒有特定日期懸停時可能會被釋放。

1 單擊/拖動：

let div = document.querySelector('div');

for (let i = 0; i < 31; i++) {

let span = document.createElement('span');

span.textContent = i + 1;

div.appendChild(span);

span.addEventListener('mousedown', () => beginSelection(i));

span.addEventListener('mousemove', () => updateSelection(i));

span.addEventListener('mouseup', () => endSelection(i));

}

document.addEventListener('mouseup', () => endSelection());

let selecting, start, end;

let beginSelection = i => {

selecting = true;

start = i;

updateSelection(i);

};

let endSelection = (i = end) => {

updateSelection(i);

selecting = false;

};

let updateSelection = i => {

if (selecting)

end = i;

[...document.querySelectorAll('span')].forEach((span, i) =>

span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));

};

div {

display: flex;

width: 200px;

flex-wrap: wrap;

}

span {

width: 30px;

border: 1px solid;

padding: 5px;

user-select: none;

}

span.selected {

background: #adf;

}

span:hover:not(.selected) {

background: #cfefff;

}

2次點擊：

let div = document.querySelector('div');

for (let i = 0; i < 31; i++) {

let span = document.createElement('span');

span.textContent = i + 1;

div.appendChild(span);

span.addEventListener('click', () => toggleSelection(i));

span.addEventListener('mousemove', () => updateSelection(i));

}

let selecting, start, end;

let toggleSelection = i => {

if (selecting)

endSelection(i);

else

beginSelection(i);

};

let beginSelection = i => {

selecting = true;

start = i;

updateSelection(i);

};

let endSelection = (i = end) => {

updateSelection(i);

selecting = false;

};

let updateSelection = i => {

if (selecting)

end = i;

[...document.querySelectorAll('span')].forEach((span, i) =>

span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));

};

div {

display: flex;

width: 200px;

flex-wrap: wrap;

}

span {

width: 30px;

border: 1px solid;

padding: 5px;

user-select: none;

}

span.selected {

background: #adf;

}

span:hover:not(.selected) {

background: #cfefff;

}

<div>

反對回復 2021-12-12

1 回答
0 關注
190 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用鼠標選擇一系列元素（例如日歷日期范圍選擇器）？

如何使用鼠標選擇一系列元素（例如日歷日期范圍選擇器）？

1 回答

添加回答

如何使用鼠標選擇一系列元素（例如日歷日期范圍選擇器）？