49实现todos-js篇

一、敲击回车触发的事件

entry(){
$(".text").on("keydown", e => {
// 敲击回车键
if(e.keyCode == 13){
// 如果文本框里面没有内容就停止运行
if(!$(".text").val()) return
// 默认总的选中框不被选中
$(".total")[0].checked = false
// 创建label标签，并将文本框中输入的内容添加到label中
// 将label追加到列表中
let label = $("<label></label>")
label.text($(".text").val())
$(".labList").append(label)
// 创建input标签作为每个选中框，将input追加到label内部的前面
let input = $("<input type='checkbox'>")
label.prepend(input)
// 创建span标签，内容填充一个 x ，鼠标悬浮为手型
// 将span追加到label内部的后面
let span = $("<span></span>")
span.html("&times;").css("cursor", "pointer")
label.append(span)
// 将文本框在内容清空
$(".text").val("")
}
})
}

二、计算没有完成的数量，即没有选中的数量

num(){
// 设置一个变量n来叠加没有选中的的数量
let n = 0
// 对每条信息的每个选中框进行遍历，当选中框没有选中就+1
for(let i = 0; i < $(".labList input").length; i++){
if($(".labList input").eq(i)[0].checked == false){
n += 1
}
}
// 将最终没有选中的数量拼接到标签内容中
$(".set .items").text(n + "items left")
}

三、总选中框与数据列表信息的出现与隐藏

hide(){
// 如果数据列表的信息不为0，总选中框与数据列表信息就显示
if($(".labList").text()){
$(".total").css("display", "block")
$(".set").css("display", "block")
}else{ // 如果数据列表的信息为0，总选中框与数据列表信息就隐藏
$(".total").css("display", "none")
$(".set").css("display", "none")
}
}

四、点击每个选中框触发的事件

disperse(){
// 用that接收this的指向
let that = this
// 点击每个选中框时
$(".labList label input").on("click", function(){
// 会改变没有选中的数量，所以每触发一次都需要重新计算数量
that.num()
// 会改变选中的信息的样式，改变的是传入的参数是触发的选中框this和改变选中框的父级标签的内容样式
that.common1(this, $(this).parent())
// 会改变总选中框的选中状态
that.common2()
// 会改变选中的数据隐藏与显示状态
that.all()
that.active()
that.computed()
})
}

五、选中框被选中的状态改变时样式改变

common1(that, change){
// 如果that被选中，change就添加中划线
if(that.checked == true){
change
.css("text-decoration", "line-through")
.css("color", "#999")
}else{ // 如果that被选中，change就删除中划线
change
.css("text-decoration", "")
.css("color", "#000")
}
}

六、总选中框的选中状态改变

common2(){
// 将获取的每个选中的集合转为数组
let arr = Array.from(document.querySelectorAll(".labList label input"))
// 对每个选中框进行遍历，如果所有的选中框都被选中时返回true
let res = arr.every(function(item){
return item.checked == true
})
// 如果所有的选中框都被选中时，总选中框自动被选中
if(res){
$(".total")[0].checked = true
}else{ // 如果每个选中框中不是全部被选中，总选中框自动取消选中
$(".total")[0].checked = false
}
}

七、改变总的选中框时触发的事件

total(){
// 获取每个选中框节点
let input = document.querySelectorAll(".labList label input")
// 使用that接收this指向
let that = this
// 点击总选中框触发事件
$(".total").on("click", function(){
// 如果总的选中框被选中
if(this.checked == true){
// 每个选中框也被选中
for(let i = 0; i < input.length; i++){
input[i].checked = true
// 会改变选中的信息的样式，改变的是传入的参数是触发的选中框this和改变选中框的父级标签的内容样式
that.common1(this, $(input[i]).parent())
}
}else{ // 如果总的选中框没有被选中
// 每个选中框也没选中
for(let i = 0; i < input.length; i++){
input[i].checked = false
// 会改变选中的信息的样式，改变的是传入的参数是触发的选中框this和改变选中框的父级标签的内容样式
that.common1(this, $(input[i]).parent())
}
}
// 会改变没有选中的数量，所以每触发一次都需要重新计算数量
that.num()
that.all()
that.active()
that.computed()
})
}

八、点击 x 删除数据

over(){
// 使用that接收this指向
let that = this
// 当鼠标悬浮到列表的具体数据中时
$("label").on("mouseover", function(){
// x 出现
$(this).find("span").css("display", "inline-block")
// 当鼠标悬浮到列表的具体数据中时
$("label").on("mouseout", function(){
// x 隐藏
$(this).find("span").css("display", "none")
})
// 点击 x 时
$(".labList label span").on("click", function(){
// 删除这数据
this.parentNode.remove()
// 会改变总选中框的选中状态
that.common2()
// 会改变总选中的隐藏与出现状态
that.hide()
})
})
}

九、对all、active、computed三者选中时的样式修改

actived(){
// 对all、active、computed三者选中时的样式修改
for(let i = 1; i < $(".set span").length - 1; i++){
$(".set span").eq(i).on("click", () => {
for(let j = 1; j < $(".set span").length - 1; j++){
$(".set")[0].children[j].id = ""
}
$(".set")[0].children[i].id = "actived"
// 点击一次都会触发相应的事件
this.active()
this.all()
this.computed()
})
}
}

十、如果all被选中，列表里面的所有数据都出现

all(){
// 如果all被选中，列表里面的所有数据都出现
if($(".all")[0].id){
$(".labList").children("label").css("display", "block")
}
}

十一、如果acticve被选中，列表里面被选中的数据就都会隐藏

active(){
// 如果acticve被选中，列表里面被选中的数据就都会隐藏
for(let i = 0; i < $(".labList label").length; i++){
$(".labList")[0].children[i].style.display = "block"
if($(".labList")[0].children[i].children[0].checked == true){
$(".labList")[0].children[i].style.display = "none"
}
}
}
}

十二、如果Computed被选中，列表里面未选中的数据就都会隐藏

computed(){
// 如果Computed被选中，列表里面未选中的数据就都会隐藏
if($(".computed")[0].id){
for(let i = 0; i < $(".labList label").length; i++){
$(".labList")[0].children[i].style.display = "block"
if($(".labList")[0].children[i].children[0].checked == false){
$(".labList")[0].children[i].style.display = "none"
}
}
}
}

十三、点击clear

clear(){
// 如果点击clear
$(".set .clear").on("click", () => {
// 清除所有选中的数据
for(let i = 0; i < $(".labList label").length; i++){
if($(".labList")[0].children[i].children[0].checked == true){
$(".labList")[0].children[i].remove()
}
}
// 会改变总选中框的选中状态
this.hide()
})
}

最后

以上就是称心航空为你收集整理的49实现todos-js篇149实现todos-js篇的全部内容，希望文章能够帮你解决49实现todos-js篇149实现todos-js篇所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。