49实现todos-js篇1

最新推荐文章于 2022-12-26 21:38:53 发布

xuchuanjiang

最新推荐文章于 2022-12-26 21:38:53 发布

阅读量328

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_49788155/article/details/122180223

版权

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()
	})
}