51实现todos-完整js

class ToDos{
constructor(){
this.init()
}
init(){
this.entry()
}
entry(){
$(".text").on("keydown", e => {
if(e.keyCode == 13){
if(!$(".text").val()) return
$(".total")[0].checked = false
let label = $("<label></label>")
label.text($(".text").val())
$(".labList").append(label)
let input = $("<input type='checkbox'>")
label.prepend(input)
let span = $("<span></span>")
span.html("&times;").css("cursor", "pointer")
label.append(span)
$(".text").val("")
this.num()
this.hide()
this.disperse()
this.total()
this.over()
this.actived()
this.all()
this.active()
this.computed()
this.clear()
}
})
}
num(){
let n = 0
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(){
if($(".labList").text()){
$(".total").css("display", "block")
$(".set").css("display", "block")
}else{
$(".total").css("display", "none")
$(".set").css("display", "none")
}
}
disperse(){
let that = this
$(".labList label input").on("click", function(){
that.num()
that.common1(this, $(this).parent())
that.common2()
that.all()
that.active()
that.computed()
})
}
common1(that, change){
if(that.checked == true){
change
.css("text-decoration", "line-through")
.css("color", "#999")
}else{
change
.css("text-decoration", "")
.css("color", "#000")
}
}
common2(){
let arr = Array.from(document.querySelectorAll(".labList label input"))
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")
let that = this
$(".total").on("click", function(){
if(this.checked == true){
for(let i = 0; i < input.length; i++){
input[i].checked = true
that.common1(this, $(input[i]).parent())
}
}else{
for(let i = 0; i < input.length; i++){
input[i].checked = false
that.common1(this, $(input[i]).parent())
}
}
that.num()
that.all()
that.active()
that.computed()
})
}
over(){
let that = this
$("label").on("mouseover", function(){
$(this).find("span").css("display", "inline-block")
$("label").on("mouseout", function(){
$(this).find("span").css("display", "none")
})
$(".labList label span").on("click", function(){
this.parentNode.remove()
that.common2()
that.hide()
})
})
}
actived(){
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(){
if($(".all")[0].id){
$(".labList").children("label").css("display", "block")
}
}
active(){
if($(".active")[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 == true){
$(".labList")[0].children[i].style.display = "none"
}
}
}
}
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(){
$(".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()
})
}
}
new ToDos()

最后

以上就是瘦瘦花瓣为你收集整理的51实现todos-完整js51实现todos-完整js的全部内容，希望文章能够帮你解决51实现todos-完整js51实现todos-完整js所遇到的程序开发问题。

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