题解 | #选择组件#
选择组件
https://www.nowcoder.com/practice/ed0bd346dc9c4184aacda183484a3a6f
function CheckGroup(renderTo, options, isMultiple) { var that = this; that.renderTo = renderTo; that.options = options; that.isMultiple = !!isMultiple; that.initHtml(); that.initEvent(); } CheckGroup.prototype.initHtml = fInitHtml; CheckGroup.prototype.initEvent = fInitEvent; CheckGroup.prototype.toggleEl = fToggleEl; CheckGroup.prototype.isSelected = fIsSelected; CheckGroup.prototype.val = fVal; function fInitHtml() { var that = this; // 请补全代码,拼接html字符串 var sHtml = ""; that.options.forEach((element) => { sHtml += `<div data-val="${element.value}" class="item">${element.text}</div>`; }); sHtml = `<div class="checkgroup ${ that.isMultiple ? "" : " radius" }">${sHtml}</div>`; that.renderTo.innerHTML = sHtml; // 请补全代码,获取checkgroup的dom元素引用 that.el = document.querySelector(".checkgroup"); } function fInitEvent() { var that = this; that.el && that.el.addEventListener("click", function (event) { var item = event.target; item.classList.contains("item") && that.toggleEl(item); }); } function fToggleEl(item) { // 根据当前是单选还是多选,以及当前元素是否选中,高亮/取消���亮指定的选项dom元素 var that = this; const checkgroup = document.querySelector(".checkgroup"); // 当前被选中状态时,点击后处理 if (that.isSelected(item)) { // 被选中时点击切换为未选中状态 item.className = "item"; } else if (that.isMultiple) { // 当前如果是多选 item.className.includes("selected") ? (item.className = "item") : (item.className = "item selected"); } else { // 当前切换为选中状态,其他切换为未选中状态 item.className = "item selected"; Array.from(document.querySelectorAll(".item")).filter((ele) => { if (ele !== item) { ele.className = "item"; } }); } } function fIsSelected(item) { // 请补全代码,判断item是否选中 return item.className.includes("selected"); } function fVal(values) { var that = this; if (arguments.length === 0) { // 请补全代码,获取高亮的选项元素 var items = document.querySelectorAll(".item.selected"); var result = Array.from(items).map((item) => item.getAttribute("data-val") ); return result; } !that.isMultiple && values.length > 1 && (values.length = 1); // 请补全代码,获取所有的选项元素 var items = document.querySelectorAll(".item"); for (let i = 0; i < values.length; i++) { that.toggleEl( document.querySelector(`.item[data-val="${values[i]}"]`) ); } return values; }