题解 | #选择组件#

选择组件

http://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 = `<div class="checkgroup{item.value}" class="item">${item.text}`
return sHtml
})
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;
if (that.isSelected(item)) {
// 请补全代码
item.classList.remove('selected')
} else if (that.isMultiple) {
// 请补全代码
item.classList.add('selected')
} else {
// 请补全代码
[...that.el.children].map(i => i.classList.remove('selected'))
item.classList.add('selected')
}
that.val();
}

function fIsSelected(item) {
// 请补全代码,判断item是否选中
return item.classList.contains("selected");
}

function fVal(values) {
var that = this;
if (arguments.length === 0) {
// 请补全代码,获取高亮的选项元素
var items = document.getElementsByClassName("selected");
// 请补全代码,获取高亮的选项元素的data-val
var result = [];
for(let i = 0; i<items.length; i++){
let item = items[i];
result.push(item.getAttribute('data-val'));
}
return result;
}
!that.isMultiple && values.length > 1 && (values.length = 1);
// 请补全代码,获取所有的选项元素
var items = document.getElementsByClassName("item");
// 请补全代码,在指定元素上加上高亮的class
for(let i = 0; i<items.length; i++){
let item = items[i];
if (values.includes(item.getAttribute('data-val'))) {
item.classList.add("selected")
} else {
item.className = 'item';
}
}
}

全部评论

相关推荐

头像
03-14 11:23
已编辑
北京邮电大学 管理咨询
211勇闯初创小公司头破血流系列3这件事不是发生在我身上的,但前同事们参与创作的积极性空前高涨,为了习惯,还是都采用第一人称的视角来看这出大戏。有一天老板在我们的眼皮底下接了一个电话,最终敲定了去北京出差的时间,下周一。他得意洋洋地说,这单下来保底五百万的流水,如果成了,我们都能得到五位数的提成。这对于一群刚上班的人来说是天大的诱惑,我们经历了周末的无偿加班,把他去北京所需要的文件都准备好了。只是在去北京的周一当天,老板睡过头了。整个上午都没见他的踪影,给他发文件也不会,打电话问问题也不接,直到中午才姗姗来迟。当然,这只是拉开了这场恐怖出差的序幕。只见他来了也不紧不慢的,手指在办公室转了一圈,...
姜大力:补充: 1.五百万的单子根本没有五百万,只是过去展示拼装的产品并简单考察。该项目只是竞标,项目内容是商业街区改造; 2.决策是当天上午10点半左右老板珊珊来迟后突发奇想去北京,中午1点在催促下着急出发,没有任何出差补助; 3.出发之前已经知道进京证不好使了,但还是执意要开车去; 4.实习生实打实连续开了***小事车,非常辛苦,工资在转正后只有两千五; (有疑问会继续补充)
点赞 评论 收藏
分享
02-05 08:49
已编辑
武汉大学 Java
野猪不是猪🐗:36k和36k之间亦有差距,ms的36k和pdd的36k不是一个概念
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务