页面预览如下

要求我们实现如下图GIF效果

即点击”开始”按钮后开始抽奖 并将抽中的文字显示在上方的盒子中

题目要求完善jQuery或JS函数 这个题是在2022年出的 现在已经2024年末 jQuery已经过时 所以不再学习 我们用JS实现即可

下面是给出的js文件 可以看到已经给出了基本实现函数 我们只需要补充即可

需要添加的具体内容如下

1.获得li 并给当前li加上active类显示颜色

声明num变量表示当前选择的奖品

const target=document.querySelector(‘.li’+num)

target.classList.add(‘active’)

当然需要注意循环问题 当num值超过奖品数(这里是8)时 将num重新置为1

2.给别的已经显示颜色的li去除active类

可以用target.parentNode.children获得其他li节点

const siblings=target.parentNode.children

使用let of 语句结合循环判断li节点是否为目前li节点 不是的话就移除active属性

3.在盒子里面添加文字

这个直接使用模版字符串填入target.textContent属性

完整js代码贴在这里 红色框部分是补充内容

这里补充一个知识点

属性选择器

这里想获得所有li可以用[class^=li](选中含有指定属性和指定属性值开头的元素)

[属性$=属性值](选中含有指定属性和指定属性值结尾的元素)

到这里就基本结束啦~ 蓝桥杯Web组也一定要拿下!