昨天已經(jīng)搭建好了項(xiàng)目的基本框架，今天來(lái)開干吧。
基本功能里，我們實(shí)現(xiàn)三個(gè)主要的功能：
添加任務(wù)
刪除任務(wù)
標(biāo)記任務(wù)完成
所有的這些操作，都使用 JavaScript 操作動(dòng)態(tài)完成。
最終效果如下：
?
添加任務(wù)
先來(lái)看添加任務(wù)部分。
<input type="text" id="task-input" placeholder="輸入新任務(wù)" /> <button id="add-task-btn">添加任務(wù)</button> <ul id="task-list"></ul>
上面是頁(yè)面的代碼，添加任務(wù)的邏輯是：
所以這里的要點(diǎn)，是：
為按鈕添加點(diǎn)擊事件
獲取 input 內(nèi)容
組裝任務(wù) DOM 元素，添加到列表中。
// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn');
先把我們需要的三個(gè)元素獲取到，這里都使用了document.getElementById()方法。
// 添加任務(wù)函數(shù) function addTask() { //添加代碼，一會(huì)兒補(bǔ)上。 } // 綁定事件監(jiān)聽器 addTaskBtn.addEventListener('click', addTask);
先定義一個(gè)處理任務(wù)添加的函數(shù)addTask()，再為按鈕添加點(diǎn)擊事件的監(jiān)聽，用的是addEventListener()方法。
最后就剩余添加任務(wù)的函數(shù)了。
我們先來(lái)看一下，在 ul 標(biāo)簽下，添加一條一條的任務(wù)，是通過(guò)什么實(shí)現(xiàn)的呢？
<li class="task"> 任務(wù)1 <button>完成</button> <button>刪除</button> </li>
其實(shí)就是上述的結(jié)構(gòu)，每一個(gè)任務(wù)，我們使用了一個(gè)li元素，里面有兩個(gè)按鈕，一個(gè)完成一個(gè)刪除。
這樣我們就可以在 JavaScript 中構(gòu)建 DOM 元素了。
// 添加任務(wù)函數(shù) function addTask() { const taskText = taskInput.value; // 1. 創(chuàng)建新的任務(wù)項(xiàng) const newTask = document.createElement('li'); newTask.className = 'task'; newTask.textContent = taskText; // 2. 添加完成按鈕 const completeBtn = document.createElement('button'); completeBtn.textContent = '完成'; // 3. 添加刪除按鈕 const deleteBtn = document.createElement('button'); deleteBtn.textContent = '刪除'; newTask.appendChild(completeBtn); newTask.appendChild(deleteBtn); // 4. 將新任務(wù)項(xiàng)添加到任務(wù)列表中 taskList.appendChild(newTask); }
通過(guò)上述代碼，我們創(chuàng)建了li元素和兩個(gè)button元素，并把它們按上述層級(jí)關(guān)系組裝好，最后追加到任務(wù)列表中。
刪除任務(wù)
有了前面的代碼，想要?jiǎng)h除任務(wù)，就是在刪除按鈕上同樣添加一個(gè)點(diǎn)擊事件監(jiān)聽。
// 3. 添加刪除按鈕 const deleteBtn = document.createElement('button'); deleteBtn.textContent = '刪除'; deleteBtn.addEventListener('click', () => { taskList.removeChild(newTask); });
把前面的添加刪除按鈕代碼里，添加事件監(jiān)聽，然后通過(guò) removeChild()方法，就直接刪除了。
任務(wù)標(biāo)記完成
同樣的道理，在完成按鈕上，也是添加事件監(jiān)聽，所不同的是這里使用了toggle()方法，為這個(gè)任務(wù)添加了一個(gè) completed 類。
// 2. 添加完成按鈕 const completeBtn = document.createElement('button'); completeBtn.textContent = '完成'; completeBtn.addEventListener('click', () => { newTask.classList.toggle('completed'); });
這個(gè) completed 類，是在前面定義的，如下：
.task.completed { text-decoration: line-through; }
完善
這樣我們就完成基本的代碼，但是如果你試了，會(huì)發(fā)現(xiàn)有一點(diǎn)點(diǎn)和我們展示的不一樣，因?yàn)檫@里少了個(gè)細(xì)節(jié)處理。
// 添加任務(wù)函數(shù) function addTask() { const taskText = taskInput.value; if (taskText === '') { alert('任務(wù)不能為空'); return; } //其它代碼 // 清空輸入框 taskInput.value = ''; }
如果加上判斷任務(wù)不能為空，以及在最后把任務(wù)的 input 清空，整個(gè)過(guò)程看起來(lái)就更好了。
完整的 JavaScript 代碼如下：
// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn'); // 添加任務(wù)函數(shù) function addTask() { const taskText = taskInput.value; if (taskText === '') { alert('任務(wù)不能為空'); return; } // 1. 創(chuàng)建新的任務(wù)項(xiàng) const newTask = document.createElement('li'); newTask.className = 'task'; newTask.textContent = taskText; // 2. 添加完成按鈕 const completeBtn = document.createElement('button'); completeBtn.textContent = '完成'; completeBtn.addEventListener('click', () => { newTask.classList.toggle('completed'); }); // 3. 添加刪除按鈕 const deleteBtn = document.createElement('button'); deleteBtn.textContent = '刪除'; deleteBtn.addEventListener('click', () => { taskList.removeChild(newTask); }); newTask.appendChild(completeBtn); newTask.appendChild(deleteBtn); // 將新任務(wù)項(xiàng)添加到任務(wù)列表中 taskList.appendChild(newTask); // 清空輸入框 taskInput.value = ''; } // 綁定事件監(jiān)聽器 addTaskBtn.addEventListener('click', addTask);
總結(jié)
恭喜你完成了今天部分的學(xué)習(xí)，希望你也動(dòng)手親自寫了寫代碼。
咱們明天繼續(xù)。
該文章在 2024/11/1 9:24:32 編輯過(guò)
400 186 1886
