jquery 是一種著名的 JavaScript 庫,它的功能豐富,容易使用。現在,我們將介紹一種 jquery 插件,它可以實現鼠標單擊不放實現多選功能。
$.fn.pressSelect = function() { var parent = this; var last_selected; parent.mousedown(function(e) { e.preventDefault(); $("#" + last_selected).removeClass("selected"); last_selected = e.target.id; $("#" + last_selected).addClass("selected"); $(this).mousemove(function(e) { e.preventDefault(); if (last_selected) { var selected = document.querySelectorAll(".selected"); Array.prototype.forEach.call(selected, function(e) { e.classList.remove("selected"); }); var elements = document.elementsFromPoint(e.clientX, e.clientY); Array.prototype.forEach.call(elements, function(e) { if (e.tagName == "DIV" && e.parentNode == parent[0]) { e.classList.add("selected"); } }); }; }); }); parent.mouseup(function() { $(this).off("mousemove"); last_selected = null; }); };
以上就是 jquery 插件的代碼,可以實現鼠標單擊不放實現多選功能。該插件的原理是:當鼠標按下時,鼠標所在位置的元素會被選中(通過 class 來實現),然后鼠標移動時,根據鼠標所在位置的元素的不同,選中的元素也會發生變化。當鼠標松開時,多選的狀態就結束了。
要使用該插件,只需要在需要多選的元素上調用 pressSelect() 方法即可。
$(".multi-select").pressSelect();
以上代碼會使所有 class 為 "multi-select" 的元素實現多選功能。
如果你想了解更多 jquery 插件的使用方法,可以去 jquery 官方網站查詢 API 文檔。