HTML/CSS/JavaScript 解法, 执行用时: 965ms, 内存消耗: 77920KB, 提交时间: 2021-07-01
{"css":".checkgroup .item{\n height: 42px;\n line-height: 42px;\n padding: 0 10px;\n margin: 10px 0;\n border: 1px solid #c7c7c7;\n border-radius: 6px;\n}\n.checkgroup.radius .item{\n border-radius: 21px;\n}\n.checkgroup .item.selected{\n border: 1px solid #08b292;\n background: #08b292;\n color: #ffffff;\n}","js":"function CheckGroup(renderTo, options, isMultiple) {\n var that = this;\n that.renderTo = renderTo;\n that.options = options;\n that.isMultiple = !!isMultiple;\n that.initHtml();\n that.initEvent();\n}\n\nCheckGroup.prototype.initHtml = fInitHtml;\nCheckGroup.prototype.initEvent = fInitEvent;\nCheckGroup.prototype.toggleEl = fToggleEl;\nCheckGroup.prototype.isSelected = fIsSelected;\nCheckGroup.prototype.val = fVal;\n\nfunction fInitHtml() {\n var that = this;\n // 请补全代码，拼接html字符串\n var sHtml = `<div class=\"checkgroup\">`;\n that.options.forEach(item => {\n sHtml += `<div data-val=\"${item.value}\" class=\"item\">${item.text}</div>`;\n });\n sHtml += \"</div>\";\n that.renderTo.innerHTML = sHtml;\n // 请补全代码，获取checkgroup的dom元素引用\n that.el = document.querySelector(\".checkgroup\");\n if (!that.isMultiple) {\n that.el.classList.add(\"radius\");\n }\n}\n\nfunction fInitEvent() {\n var that = this;\n that.el && that.el.addEventListener(\"click\", function(event) {\n var item = event.target;\n item.classList.contains(\"item\") && that.toggleEl(item);\n });\n}\n\nfunction fToggleEl(item) {\n // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素\n var that = this;\n if (that.isSelected(item)) {\n // 请补全代码\n item.classList.remove(\"selected\");\n } else if (that.isMultiple) {\n // 请补全代码\n item.classList.add(\"selected\");\n } else {\n // 请补全代码\n let selected = document.querySelector(\".item.selected\")\n selected && selected.classList.remove(\"selected\");\n item.classList.add(\"selected\");\n\n }\n}\n\nfunction fIsSelected(item) {\n // 请补全代码，判断item是否选中\n return item.classList.contains(\"selected\");\n}\n\nfunction fVal(values) {\n var that = this;\n if (arguments.length === 0) {\n // 请补全代码，获取高亮的选项元素\n var items = document.querySelectorAll(\".selected\");\n // 请补全代码，获取高亮的选项元素的data-val\n return [].slice.call(items).map(function (item) {\n return item.getAttribute('data-val');\n });\n //return [...items].reduce((c, v) => {\n // return [...c, v.dataset[\"val\"]];\n //}, []);\n }\n !that.isMultiple && values.length > 1 && (values.length = 1);\n // 请补全代码，获取所有的选项元素\n let els = document.querySelectorAll(\".item\");\n values.forEach(item => {\n let el = document.querySelector(`.item[data-val=\"${item}\"]`);\n that.toggleEl(el);\n });\n // if(!that.isMutiple){\n // document.querySelector('.item.selected').classList.remove('selected')\n // }\n //values.forEach(item=>{\n // document.querySelector(`.item[data-val=\"${item}\"]`).classList.toggle('selected')\n // })\n // 请补全代码，在指定元素上加上高亮的class\n\n}","html":"<div id=\"jsCheckGroup\">\n <div class=\"checkgroup radius\">\n <div data-val=\"a\" class=\"item selected\">选项a</div>\n <div data-val=\"b\" class=\"item\">选项b</div>\n <div data-val=\"c\" class=\"item\">选项c</div>\n <div data-val=\"d\" class=\"item\">选项d</div>\n </div>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1040ms, 内存消耗: 77860KB, 提交时间: 2021-07-06
{"css":".checkgroup .item{\n height: 42px;\n line-height: 42px;\n padding: 0 10px;\n margin: 10px 0;\n border: 1px solid #c7c7c7;\n border-radius: 6px;\n}\n.checkgroup.radius .item{\n border-radius: 21px;\n}\n.checkgroup .item.selected{\n border: 1px solid #08b292;\n background: #08b292;\n color: #ffffff;\n}","js":"function CheckGroup(renderTo, options, isMultiple) {\n\tvar that = this;\n\tthat.renderTo = renderTo;\n\tthat.options = options;\n\tthat.isMultiple = !!isMultiple;\n\tthat.initHtml();\n\tthat.initEvent();\n}\nCheckGroup.prototype.initHtml = fInitHtml;\nCheckGroup.prototype.initEvent = fInitEvent;\nCheckGroup.prototype.toggleEl = fToggleEl;\nCheckGroup.prototype.isSelected = fIsSelected;\nCheckGroup.prototype.val = fVal;\n\nfunction fInitHtml() {\n\tvar that = this;\n\t// 请补全代码，拼接html字符串\n\tvar sHtml = `<div class=\"checkgroup${that.isMultiple ? \"\" : \" radius\"}\">`;\n\tfor (let i = 0; i < that.options.length; i++) {\n\t\tsHtml += `<div data-val=\"${that.options[i].value}\" class=\"item\">${that.options[i].text}</div>`;\n\t}\n\tsHtml += \"</div>\";\n\tthat.renderTo.innerHTML = sHtml;\n\t// 请补全代码，获取checkgroup的dom元素引用\n\tthat.el = document.getElementsByClassName(\"checkgroup\")[0];\n}\n\nfunction fInitEvent() {\n\tvar that = this;\n\tthat.el && that.el.addEventListener('click', function(event) {\n\t\tvar item = event.target;\n\t\titem.classList.contains('item') && that.toggleEl(item);\n\t});\n}\n\nfunction fToggleEl(item) {\n\t// 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素\n\tvar that = this;\n\tif (that.isSelected(item)) {\n\t\t// 请补全代码\n\t\titem.classList.remove(\"selected\");\n\t} else if (that.isMultiple) {\n\t\t// 请补全代码\n\t\titem.classList.add(\"selected\");\n\t} else {\n\t\t// 请补全代码\n\t\tlet itemList = document.getElementsByClassName(\"item\");\n\t\tfor (let i = 0, len = itemList.length; i < len; i++) {\n\t\t\tif (itemList[i].classList.contains(\"selected\")) {\n\t\t\t\titemList[i].classList.remove(\"selected\");\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\titem.classList.add(\"selected\");\n\t}\n}\n\nfunction fIsSelected(item) {\n\t// 请补全代码，判断item是否选中\n\treturn item.classList.contains(\"selected\");\n}\n\nfunction fVal(values) {\n\tvar that = this;\n\tif (arguments.length === 0) {\n\t\t// 请补全代码，获取高亮的选项元素\n\t\tvar items = document.getElementsByClassName(\"selected\");\n\t\t// 请补全代码，获取高亮的选项元素的data-val\n\t\tvar result = [];\n\t\tfor(let i = 0; i<items.length; i++){\n\t\t\tlet item = items[i];\n\t\t\tresult.push(item.attributes[\"data-val\"].value);\n\t\t}\n\t\treturn result;\n\t}!that.isMultiple && values.length > 1 && (values.length = 1);\n\t// 请补全代码，获取所有的选项元素\n\tvar items = document.getElementsByClassName(\"item\");\n\t// 请补全代码，在指定元素上加上高亮的class\n\tfor(let i = 0; i<items.length; i++){\n\t\tlet item = items[i];\n\t\tif (values.includes(item.attributes[\"data-val\"].value)) {\n\t\t\titem.classList.add(\"selected\")\n\t\t} else {\n\t\t\titem.className = 'item';\n\t\t}\n\t}\n}","html":"<div id=\"jsCheckGroup\">\n <div class=\"checkgroup radius\">\n <div data-val=\"a\" class=\"item selected\">选项a</div>\n <div data-val=\"b\" class=\"item\">选项b</div>\n <div data-val=\"c\" class=\"item\">选项c</div>\n <div data-val=\"d\" class=\"item\">选项d</div>\n </div>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1046ms, 内存消耗: 77884KB, 提交时间: 2021-07-12
{"css":".checkgroup .item{\n height: 42px;\n line-height: 42px;\n padding: 0 10px;\n margin: 10px 0;\n border: 1px solid #c7c7c7;\n border-radius: 6px;\n}\n.checkgroup.radius .item{\n border-radius: 21px;\n}\n.checkgroup .item.selected{\n border: 1px solid #08b292;\n background: #08b292;\n color: #ffffff;\n}","js":"function CheckGroup(renderTo, options, isMultiple) {\n var that = this;\n that.renderTo = renderTo;\n that.options = options;\n that.isMultiple = !!isMultiple;\n that.initHtml();\n that.initEvent();\n}\nCheckGroup.prototype.initHtml = fInitHtml;\nCheckGroup.prototype.initEvent = fInitEvent;\nCheckGroup.prototype.toggleEl = fToggleEl;\nCheckGroup.prototype.isSelected = fIsSelected;\nCheckGroup.prototype.val = fVal;\n\nfunction fInitHtml() {\n var that = this;\n // 请补全代码，拼接html字符串\n var sHtml = `<div class=\"checkgroup${that.isMultiple ? \"\" : \" radius\"}\">`;\n var options = that.options;\n for(var i =0; i< options.length; i++) {\n sHtml += '<div data-val=\"'+ options[i].value +'\" class=\"item\">'+options[i].text+'</div>';\n }\n sHtml += '</div>';\n that.renderTo.innerHTML = sHtml;\n // 请补全代码，获取checkgroup的dom元素引用\n that.el = document.getElementsByClassName('checkgroup')[0];\n}\n\nfunction fInitEvent() {\n var that = this;\n that.el && that.el.addEventListener('click', function (event) {\n var item = event.target;\n item.classList.contains('item') && that.toggleEl(item);\n });\n}\n\nfunction fToggleEl(item) {\n // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素\n var that = this;\n if (that.isSelected(item)) {\n item.classList.remove('selected');\n // 请补全代码\n } else if (that.isMultiple) {\n // 请补全代码\n item.classList.add('selected');\n } else {\n // 请补全代码\n var $s = that.el.getElementsByClassName('selected')[0];\n $s.classList.remove('selected');\n item.classList.add('selected');\n }\n}\n\nfunction fIsSelected(item) {\n // 请补全代码，判断item是否选中\n return item.classList.contains(\"selected\");\n}\n\nfunction fVal(values) {\n var that = this;\n if (arguments.length === 0) {\n // 请补全代码，获取高亮的选项元素\n var items = document.getElementsByClassName(\"selected\");\n // 请补全代码，获取高亮的选项元素的data-val\n var result = [];\n for(let i = 0; i<items.length; i++){\n let item = items[i];\n result.push(item.attributes[\"data-val\"].value);\n }\n return result;\n }\n !that.isMultiple && values.length > 1 && (values.length = 1);\n // 请补全代码，获取所有的选项元素\n var items = document.getElementsByClassName(\"item\");\n // 请补全代码，在指定元素上加上高亮的class\n for(let i = 0; i<items.length; i++){\n let item = items[i];\n if (values.includes(item.attributes[\"data-val\"].value)) {\n item.classList.add(\"selected\")\n } else {\n item.className = 'item';\n }\n }\n}","html":"<div id=\"jsCheckGroup\">\n <div class=\"checkgroup radius\">\n <div data-val=\"a\" class=\"item selected\">选项a</div>\n <div data-val=\"b\" class=\"item\">选项b</div>\n <div data-val=\"c\" class=\"item\">选项c</div>\n <div data-val=\"d\" class=\"item\">选项d</div>\n </div>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1065ms, 内存消耗: 77852KB, 提交时间: 2021-07-14
{"css":".checkgroup .item{\n height: 42px;\n line-height: 42px;\n padding: 0 10px;\n margin: 10px 0;\n border: 1px solid #c7c7c7;\n border-radius: 6px;\n}\n.checkgroup.radius .item{\n border-radius: 21px;\n}\n.checkgroup .item.selected{\n border: 1px solid #08b292;\n background: #08b292;\n color: #ffffff;\n}","js":"function CheckGroup(renderTo, options, isMultiple) {\n var that = this;\n that.renderTo = renderTo;\n that.options = options;\n that.isMultiple = !!isMultiple;\n that.initHtml();\n that.initEvent();\n}\nCheckGroup.prototype.initHtml = fInitHtml;\nCheckGroup.prototype.initEvent = fInitEvent;\nCheckGroup.prototype.toggleEl = fToggleEl;\nCheckGroup.prototype.isSelected = fIsSelected;\nCheckGroup.prototype.val = fVal;\n\nfunction fInitHtml() {\n var that = this;\n // 请补全代码，拼接html字符串\n var sHtml = `<div class=\"checkgroup${that.isMultiple ? \"\" : \" radius\"}\">`;\n that.options.map(item => {\n sHtml += `<div data-val=\"${item.value}\" class=\"item\">${item.text}</div>`\n return sHtml\n })\n that.renderTo.innerHTML = sHtml+\"</div>\";\n // 请补全代码，获取checkgroup的dom元素引用\n that.el = document.querySelector('.checkgroup');\n}\n\nfunction fInitEvent() {\n var that = this;\n that.el && that.el.addEventListener('click', function (event) {\n var item = event.target;\n item.classList.contains('item') && that.toggleEl(item);\n });\n}\n\nfunction fToggleEl(item) {\n // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素\n var that = this;\n if (that.isSelected(item)) {\n // 请补全代码\n item.classList.remove('selected')\n } else if (that.isMultiple) {\n // 请补全代码\n item.classList.add('selected')\n } else {\n // 请补全代码\n \n [...that.el.children].map(i => i.classList.remove('selected'))\n \n item.classList.add('selected')\n item.classList.add('selected')\n }\n that.val();\n}\n\nfunction fIsSelected(item) {\n // 请补全代码，判断item是否选中\n return item.classList.contains(\"selected\");\n \n}\n\nfunction fVal(values) {\n var that = this;\n if (arguments.length === 0) {\n // 请补全代码，获取高亮的选项元素\n var items = document.getElementsByClassName(\"selected\");\n // 请补全代码，获取高亮的选项元素的data-val\n var result = [];\n for(let i = 0; i<items.length; i++){\n let item = items[i];\n result.push(item.getAttribute('data-val'));\n }\n return result;\n }\n !that.isMultiple && values.length > 1 && (values.length = 1);\n // 请补全代码，获取所有的选项元素\n var items = document.getElementsByClassName(\"item\");\n // 请补全代码，在指定元素上加上高亮的class\n for(let i = 0; i<items.length; i++){\n let item = items[i];\n if (values.includes(item.getAttribute('data-val'))) {\n item.classList.add(\"selected\")\n } else {\n item.className = 'item';\n }\n }\n}","html":"<div id=\"jsCheckGroup\">\n <div class=\"checkgroup radius\">\n <div data-val=\"a\" class=\"item selected\">选项a</div>\n <div data-val=\"b\" class=\"item\">选项b</div>\n <div data-val=\"c\" class=\"item\">选项c</div>\n <div data-val=\"d\" class=\"item\">选项d</div>\n </div>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1134ms, 内存消耗: 77864KB, 提交时间: 2021-07-13
{"css":".checkgroup .item{\n height: 42px;\n line-height: 42px;\n padding: 0 10px;\n margin: 10px 0;\n border: 1px solid #c7c7c7;\n border-radius: 6px;\n}\n.checkgroup.radius .item{\n border-radius: 21px;\n}\n.checkgroup .item.selected{\n border: 1px solid #08b292;\n background: #08b292;\n color: #ffffff;\n}","js":" function CheckGroup(renderTo, options, isMultiple) {\n var that = this;\n that.renderTo = renderTo;\n that.options = options;\n that.isMultiple = !!isMultiple;\n that.initHtml();\n that.initEvent();\n }\n CheckGroup.prototype.initHtml = fInitHtml;\n CheckGroup.prototype.initEvent = fInitEvent;\n CheckGroup.prototype.toggleEl = fToggleEl;\n CheckGroup.prototype.isSelected = fIsSelected;\n CheckGroup.prototype.val = fVal;\n\n function fInitHtml() {\n var that = this\n // 请补全代码，拼接html字符串\n var sHtml = '';\n for (var i = 0; i < that.options.length; i++) {\n sHtml += `<div data-val=\"${that.options[i].value}\" class=\"item\">${that.options[i].text}</div>`\n }\n sHtml = '<div class=\"checkgroup\">' + sHtml + '</div>'\n that.renderTo.innerHTML = sHtml;\n // 请补全代码，获取checkgroup的dom元素引用\n that.el = document.querySelector('.checkgroup');\n that.el.classList.add('radius')\n }\n\n function fInitEvent() {\n var that = this;\n that.el && that.el.addEventListener('click', function (event) {\n var item = event.target;\n item.classList.contains('item') && that.toggleEl(item);\n });\n }\n\n function fToggleEl(item) {\n // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消 指定的选项dom元素\n var that = this;\n if (that.isSelected(item)) {\n // 请补全代码: 如果当前item已经被选择\n item.classList.remove('selected')\n } else if (that.isMultiple) {\n // 请补全代码: 如果是多选\n that.el.classList.remove('radius')\n item.classList.add('selected')\n } else {\n // 请补全代码：如果当前item没有被选择，且为单选\n for(var i = 0; i < that.el.children.length; i++) {\n that.el.children[i].className = 'item'\n }\n item.classList.add('selected')\n }\n }\n\n function fIsSelected(item) {\n // 请补全代码，判断item是否选中\n return item.classList.contains('selected')\n }\n\n function fVal(values) {\n var that = this;\n if (arguments.length === 0) {\n // 请补全代码，获取高亮的选项元素\n var items = document.querySelectorAll('.selected');\n // 请补全代码，获取高亮的选项元素的data-val\n var result = [];\n for(var i = 0; i < items.length; i++) {\n result.push(items[i].dataset.val)\n }\n return result;\n }\n !that.isMultiple && values.length > 1 && (values.length = 1);\n // 请补全代码，获取所有的选项元素\n var items = document.querySelectorAll('.item');\n // 请补全代码，在指定元素上加上高亮的class\n values.forEach(item => {\n that.toggleEl(document.querySelector(`.item[data-val=\"${item}\"]`))\n })\n }\n","html":"<div id=\"jsCheckGroup\">\n <div class=\"checkgroup radius\">\n <div data-val=\"a\" class=\"item selected\">选项a</div>\n <div data-val=\"b\" class=\"item\">选项b</div>\n <div data-val=\"c\" class=\"item\">选项c</div>\n <div data-val=\"d\" class=\"item\">选项d</div>\n </div>\n</div>","libs":[]}
