<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .check{
overflow: hidden;
list-style: none;
padding: 0;
}
.check li{
float: left;
}
.enter{
width: 80%;
height: 30px;;
} */
</style>
</head>
<body>
<!-- <div class="wrap">
<h3>小目標列表</h3>
<h5>添加小目標列表</h5>
<input class="enter" type="text">
<p>共有N個目標</p>
<ul class="check">
<li><input type="radio">所有目標</li>
<li><input type="radio">已完成目標目標</li>
<li><input type="radio">未完成目標</li>
</div>
<input class="enter" type="text">
</div> -->
<h1>高新小目標列表</h1>
<h3>添加一個學習目標</h3>
<input type="text" id="change">
<p>共有 <b id="total"></b> 個目標</p>
<div>
<input type="radio" value="0" checked name="wyq">所有目標
<input type="radio" value="1" name="wyq">已完成目標
<input type="radio" value="2" name="wyq">未完成目標
</div>
<div id="list">
</div>
<script>
let change=document.getElementById("change");
let total=document.getElementById("total");
let radioArr=document.getElementsByName("wyq");
let list=document.getElementById("list");
//class 定義類 原型方法
//function ====>bind(this)===>event
//===>參數(shù)的默認值<===>短路現(xiàn)象||
//字符串===>``==>${}
//遞歸===>return 函數(shù)調(diào)用
//過濾元素 ==>filter
//es6 json===>定義函數(shù)的簡寫 fn()
//typeof===>函數(shù) 封裝 ==>參數(shù)檢測（代碼的健壯性不夠）
// change.onkeydown=
//定義Mt類
class Mt{
//Mt有4個屬性title，total，status，list
constructor(title='',total=0,status=0,list=[]){
//title ==>input change
this.title=title;
//總目標
this.total=total;
//狀態(tài)
this.status=status;
//數(shù)據(jù)
this.list=list;
}
//給id=change的input輸入框定義一個事件change
change(){
console.log('按下事件');
console.log(this);
//當按下回車鍵時觸發(fā)
if(event.keyCode==13){
//獲取輸入框的值賦給屬性title
this.title=event.target.value;
console.log(event.target.value);
//回車之后清空輸入框
event.target.value='';
//0 全部
//1 完成
//2 未完成
//給數(shù)組list拼接標簽
//給p標簽下的每個div一個標識index即下標，可以通過下標來尋找確定每個div，以便可以分別對div進行操作
//給p下的每個div一個status，初始值均為2，即都是“未完成”
//給p下的每個div綁定一個事件upStatus來更新每個div的status的值
//給第2個p標簽的內(nèi)容賦值為輸入框的值
//給b標簽綁定一個事件delList，并給一個唯一標識index即下標，來區(qū)分每一個b，以便確定點擊的是哪個“X”
//給每一塊一個status，初始值為2以便后來的篩選
this.list.push({
el:
`
<p status="${0}">
<div index=${this.list.length} onclick="mt.upStatus()" style="width:20px;height:20px;display:inline-block;background-color:black;" status='2'></div>
<p>${this.title}</p>
<b onclick='mt.delList()' index=${this.list.length}>X</b>
</p>
`,
status:2
});
console.log(this.list);
//添加完數(shù)據(jù)之后 render
// this.render();
//將拼接好的this.list當做參數(shù)傳給render并調(diào)用
this.render(this.list);
}
}
render(l){
//頁面的更新
//list
// console.log(this.list);
// list.innerHTML=this.list.join(',');
// for(let i=0,len=this.list.length;i<len;i++){
// }
// list.innerHTML=;
//遞歸==>條件 什么時候結(jié)束？=>i>length
//第一個參數(shù)i：用來控制循環(huán)層即下標,超過i時循環(huán)結(jié)束不再執(zhí)行
//第二個參數(shù)：一個數(shù)組
//第3個參數(shù)：即用來顯示到頁面的字符串
function listStr(i,arr,str){
//當下標超出 超出下標的那個值得typeof為undefined，當下標超出將字符串返回
if(typeof arr[i]==="undefined"){
return str;
}else{
//字符串拼接
str+= arr[i].el;
//讓下標向跳出循環(huán)的方向靠近
i++;
// console.log(i);
//將返回的值繼續(xù)作為參數(shù)，繼續(xù)調(diào)用函數(shù)litStr
return listStr(i,arr,str);
}
}
//list
// list.innerHTML=listStr(0,this.list,'');
//將字符串放入頁面
list.innerHTML=listStr(0,l,'');
}
upStatus(){
// console.log(this);
// console.log(event.target)
// console.log('我被觸發(fā)了！?。?)
// console.log(event.target.status);
//獲取當前點擊的那個div的status的值
let s=event.target.getAttribute("status");
//獲取當前點擊的div的index的值
let index=event.target.getAttribute("index");
//判斷s的值是2的話為1否則為2然后賦給status，（這里的status是json中和el同在的那個status）
this.list[index].status=s==2?1:2;
//判斷s的值然后賦值給變量status
let status=s==2?1:2;
//讓你點擊的那個div變色
event.target.style.backgroundColor=s==1?'black':"gold";
//修改你點擊的那個div的status的值為變量status的值
event.target.setAttribute('status',status);
// console.log(s);
}
delList(){
//用一個變量index來接收當前點擊的那個b標簽的index的值，來確定你點擊的是哪個b
let index=event.target.getAttribute("index");
//將你點擊的那個b標簽所在的el的內(nèi)容清空
this.list[Number(index)].el='';
// this.render();
//將點擊“X”后的清空過el的那一塊所在的數(shù)組作為參數(shù)傳給render并調(diào)用render
this.render(this.list);
console.log(this.list);
console.log(index);
}
radioChange(){
//1.value
//定義變量val的值等于當前點擊的單選框的value值用來確定當前點擊的哪個單選框
//，為了篩選出標簽中哪些標簽的status的值和當前點擊的單選框的value值相等（每個標簽的status的值0,1,2和單選框的value值0,1,2對應）
let val=event.target.value;
console.log(val);
console.log(event.target.value);
//2.value==>list
//filter
console.log(this.list);
let arr=this.list.filter(
(value)=>{
//返回在arr中val為0的元素或者返回val和values.status相等的所有元素
return val==0||val==value.status
}
);
console.log(arr);
//3.list===>render
this.render(arr);
}
}
//第一個坑點
//實例化
let mt=new Mt();
//給change的onkeydown事件綁定
change.onkeydown=mt.change.bind(mt);
for(let i=0;i<radioArr.length;i++){
//確定點擊哪個單選框來顯示哪些東西被顯示
radioArr[i].onchange=mt.radioChange.bind(mt);
}
</script>
</body>
</html>
面向?qū)ο?
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
相關閱讀更多精彩內(nèi)容
- 1、面向?qū)ο缶幊探榻B 面向?qū)ο?object-oriented ;簡稱: OO) 至今還沒有統(tǒng)一的概念 我這里把它...
- 一.對象和類的概念 對象：真實存在的唯一事物 類：同一事物的公共屬性與行為的抽取 面向?qū)ο蟮暮诵乃枷耄赫疫m合的對象...
- 由于最早學的編程語言都是面向過程的，導致自己先入為主，對面向過程的印象特別深刻。而面向?qū)ο?，雖然一直都有學習和用到...
- 面向過程的程序設計: 面向過程,一種較早的編程思想，在過程的角度思考問題，強調(diào)的就是功能行為,功能的執(zhí)行過程,即先...
