2. 搜一搜呀
https://www.lanqiao.cn/problems/1762/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
请完善 index.html
文件,让页面具有如下所示的效果:
filteredList() {
// TODO: 请补充代码
return this.postList.filter(item =>item.title.search(this.search)!==-1)
},
前置知识:
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,查找并返回指定字符串第一次出现的位置。如果没有找到任何匹配的子串,则返回 -1。
那么就只需加入这句话就可以了,数据都在postList里面,直接return this.postList我们可以得到全部数据,实现与输入框数据同步,我们可以使用filter api进行过滤,在使用search api进行内容匹配。
4. 关于你的欢迎语
https://www.lanqiao.cn/problems/1764/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
请修复 index.js
文件中存在的 bug,修复完成后,在表单的对应输入框中输入以下内容:
页面效果如下所示:
function generate() {
subject = document.getElementById("subject");
event1 = document.getElementById("event1");
event2 = document.getElementById("event2");
result = "欢迎用户"+subject.value+"在"+event2.value+"学习"+event1.value+"课程!";
document.getElementById("result").value = result;
}
删掉if判断加上这句就好了。
5. 卡片化标签页 (考点 Dom)
https://www.lanqiao.cn/problems/1765/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
请在 index.js
文件中根据现有 DOM 结构(页面布局部分不能做任何修改操作)实现选项卡动态切换功能。
页面效果如下所示:
思路:
通过观察我们不难发现,鼠标点击事件触发,让相对应选项栏和图片内容栏添加上 active类,从而达到展示效果。
代码:
function init() {
// TODO 待补充代码
var tabs = document.getElementsByClassName("tabs")[0].children;
var card = document.getElementById("content").children;
for (let index = 0; index < tabs.length; index++) {
tabs[index].onclick = function () {
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove("active");
card[j].classList.remove("active");
}
tabs[index].classList.add("active");
card[index].classList.add("active");
};
}
}
init();