我正在尝试改进我的第一个项目的代码,该项目to do list
使用的是fontawesome icons 。在每个项目中,除其他外,我都有一个用于标记任务是否完成的按钮。此按钮与存储在代码中的变量中的默认图标一起出现CIRCLE_INCON
,但我想要的是,当任务完成时,它会更改为存储在变量中的另一个图标CHECK_ICON
。我所做的是以下(我只显示与按钮相关的代码部分以完成我调用的任务checkBtn
):
//ICONS
const CIRCLE_INCON = `<i class="far fa-circle fa-lg"></i>`;
const CHECK_ICON = `<i class="far fa-check-circle fa-lg"></i>`;
//LOS "..." SIGNIFICAN QUE HAY CODIGO ANTES DE ESO
//PUEDEN VER ABAJO EL CODIGO COMPLETO
function addTask(fromList){
//...
//CREATING COMPONENTS
const checkBtn= document.createElement("button");
//...
//SUB-COMPONENT CHECKBOX
checkBtn.classList.add("checkbox");
checkBtn.innerHTML = CIRCLE_INCON;
checkBtn.value= "not-checked";
//...
//ASI ES COMO LLAMO A LA FUNCION QUE SE ENCARGA DE CHEQUEAR O COMPLETAR LA TAREA
item.addEventListener("click", (element) => {
element = element.target;
let circleClass = element.classList.contains("fa-circle")
let checkClass= element.classList.contains("fa-check-circle");
(circleClass || checkClass) ? checkTask() : false;
});
//CHECK THE TASK
function checkTask (){
//SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
checkBtn.value ==="not-checked" ? completedTask(): incompletedTask();
function completedTask() {
checkBtn.setAttribute("value","checked");
checkBtn.innerHTML = CHECK_ICON;
saveValue(checkBtn, CHECK_ICON);
}
function incompletedTask() {
checkBtn.setAttribute("value","not-checked");
checkBtn.innerHTML = CIRCLE_INCON;
saveValue(checkBtn, CIRCLE_INCON);
}
//ACA ES COMO GUARDO EL VALOR DE COMPLETED AL LOCALSTORAGE
function saveValue(el, icon){
const dataLS = JSON.parse(localStorage.getItem('item.list'));
dataLS[id].completed = el.value;
dataLS[id].icon = icon
el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
localStorage.setItem('item.list', JSON.stringify(dataLS));
}
toDoTxt.classList.toggle("completed");
};
所以代码完全按照我的意愿工作,但我想要的是checkTask()
使用.toggle()
这样的东西来简化函数:
//PRIMERO CAMBIO DE TAG DE "button" A UN "i"
const checkBtn= document.createElement("i");
//CHECK THE TASK
function checkTask (){
//SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
checkBtn.classList.toggle("fa-circle");
checkBtn.classList.toggle("fa-check-circle");
toDoTxt.classList.toggle("completed");
//ACA ES COMO GUARDO EL VALOR DE COMPLETED AL LOCALSTORAGE
function saveValue(el, icon){
const dataLS = JSON.parse(localStorage.getItem('item.list'));
dataLS[id].completed = el.value;
dataLS[id].icon = icon
el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
localStorage.setItem('item.list', JSON.stringify(dataLS));
}
};
但问题是当我这样做时,图标没有出现,而是出现了一个正方形。如果有人知道发生了什么,请向我解释,我将非常感激。下面我留下完整的代码,这样你就可以看到它是如何组成的。
const form = document.getElementById("list");
const input = document.getElementById("input");
const normalButton = document.getElementById("normal");
const finishedTask = document.getElementById("done");
const unfinishedTask = document.getElementById("not-done");
const refreshBtn = document.getElementById("refresh-btn");
const failBox = document.getElementById("fail");
const closeBtn = document.getElementById("close-btn");
const taskCategories = document.getElementById("categories")
//ICONS
const CIRCLE_INCON = `<i class="far fa-circle fa-lg"></i>`;
const CHECK_ICON = `<i class="far fa-check-circle fa-lg"></i>`;
const TRASH_ICON = `<i class="fas fa-trash-alt"></i>`;
const EDIT_ICON =`<i class="far fa-edit"></i>`;
let lists = [];
document.addEventListener("keyup",(event)=>{ if(event.keyCode === 13) addTask() });
refreshBtn.addEventListener("click",() => refreshPage());
// Obtener desde localStorage al cargar todo el DOM
window.addEventListener('load', function() {
lists = JSON.parse(localStorage.getItem("item.list")) || [];
// Agregar en HTML los elementos encontrados
lists.forEach((item) => addTask(item));
});
function addTask(fromList){
event.preventDefault();
let inputValue= (fromList) ? fromList.name : input.value;
if(inputValue === "" || inputValue === null) return failAlert();
function failAlert(){
failBox.style.display = "block";
closeBtn.addEventListener("click", ()=> failBox.style.display = "none")
}
//CREATING COMPONENTS
const item = document.createElement("li");
const deleteBtn = document.createElement("button");
const toDoTxt = document.createElement("p");
const editBtn = document.createElement("button");
const checkBtn= document.createElement("i");
const btnContainer = document.createElement("div");
btnContainer.classList.add("buttons");
//ITEM COMPONENT
item.classList.add("item");
let id = item.dataset. id;
id = (fromList) ? fromList.id : lists.length;
//APPEND COMPONENTS TO THE ITEM
item.appendChild(checkBtn);
item.appendChild(toDoTxt);
form.appendChild(item);
item.appendChild(btnContainer);
//SUB-COMPONENT TODO
toDoTxt.classList.add("text");
const text= document.createTextNode(inputValue);
toDoTxt.appendChild(text);
//SUB-COMPONENT CHECKBOX
checkBtn.classList.add("checkbox");
checkBtn.innerHTML = CIRCLE_INCON;
checkBtn.value= "not-checked";
//SUB-COMPONENT EDIT BUTTON
editBtn.classList.add("edit");
editBtn.innerHTML = EDIT_ICON;
btnContainer.appendChild(editBtn);
//SUB COMPONENT DELETE BUTTON
deleteBtn.classList.add("delete");
deleteBtn.innerHTML = TRASH_ICON;
btnContainer.appendChild(deleteBtn);
item.addEventListener("click", (element) => {
element = element.target;
let circleClass = element.classList.contains("fa-circle")
let checkClass= element.classList.contains("fa-check-circle");
let trashClass = element.classList.contains("fa-trash-alt");
let editClass = element.classList.contains("fa-edit");
(circleClass || checkClass) ? checkTask() : false;
(trashClass) ? deleteTask() : false;
(editClass) ? editTask() : false;
});
//CHECK THE TASK
function checkTask (){
//SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
checkBtn.value ==="not-checked" ? completedTask(): incompletedTask();
checkBtn.classList.toggle("fa-circle");
checkBtn.classList.toggle("fa-check-circle");
function completedTask() {
checkBtn.setAttribute("value","checked");
checkBtn.innerHTML = CHECK_ICON;
saveValue(checkBtn, CHECK_ICON);
}
function incompletedTask() {
checkBtn.setAttribute("value","not-checked");
checkBtn.innerHTML = CIRCLE_INCON;
saveValue(checkBtn, CIRCLE_INCON);
}
//ACA ES COMO GUARDO EL VALOR DE COMPLETED AL LOCALSTORAGE
function saveValue(el, icon){
const dataLS = JSON.parse(localStorage.getItem('item.list'));
dataLS[id].completed = el.value;
dataLS[id].icon = icon
el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
localStorage.setItem('item.list', JSON.stringify(dataLS));
}
toDoTxt.classList.toggle("completed");
};
// EDIT THE TASK
function editTask (){
//ACA YO ES DONDE EDITO LAS TAREAS
toDoTxt.innerHTML = `<div class=".edit-container" id = "edit-container"></div>`;
let editContainer = document.getElementById("edit-container");
let editInput = document.createElement("input");
let submitEdit = document.createElement("button");
editInput.classList.add("edit-input");
submitEdit.classList.add("submit-edit");
submitEdit.innerHTML = `<i class="fas fa-plus-circle fa-lg"></i>`
editContainer.appendChild(editInput);
editContainer.appendChild(submitEdit);
submitEdit.addEventListener("click",() => editTask());
//ACA ES COMO GUARDO EL NUEVO NOMBRE EDITADO AL LOCALSTORAGE
function saveNewTask(){
const dataLS = JSON.parse(localStorage.getItem('item.list'));
dataLS[parseInt(id)].name = editInput.value;
localStorage.setItem('item.list', JSON.stringify(dataLS));
}
function editTask (){
toDoTxt.innerHTML = editInput.value;
saveNewTask();
};
};
//DELETE THE TASK
function deleteTask (){
//DONDE ELIMINO LAS TAREAS
const dataLS = JSON.parse(localStorage.getItem('item.list'));
form.removeChild(item);
deleteBtn.parentNode.parentNode
dataLS.splice(dataLS.id, 1);
localStorage.setItem('item.list', JSON.stringify(dataLS));
};
taskCategories.addEventListener("click", (element) => {
element = element.target;
console.log(element);
if (element === normalButton) return goToNormal();
if (element === finishedTask) return seeFinishedTasks();
if (element === unfinishedTask) return seeUnfinishedTask();
});
let goToNormal = () => item.style.display = "flex";
let seeFinishedTasks = () => {
checkBtn.value==="checked" ? item.style.display = "flex" : item.style.display = "none";
};
let seeUnfinishedTask = () => {
checkBtn.value==="not-checked" ? item.style.display = "flex" : item.style.display = "none";
};
//UPLOADING THE DATA
let data = createDataList(inputValue, checkBtn.value, CIRCLE_INCON);
if(!fromList) {
lists.push(data);
save();
}
function save(){
localStorage.setItem("item.list", JSON.stringify(lists));
}
function createDataList(name, completed, icon){
return {id: lists.length, name: name, completed: completed, icon: icon};
}
input.value = "";
}
function refreshPage(){
<!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">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="header">
<i class="fas fa-sync-alt" id="refresh-btn"></i>
<div class="title-container">
<h1 class="title">To Do List App</h1>
</div>
<div class="date" id="date"></div>
<div class="categories" id="categories">
<button id="normal" class="normal">NORMAL</button>
<button id="done" class="done">DONE</button>
<button id="not-done" class="not-done">NOT-DONE</button>
</div>
</div>
<div class="fail" id="fail">
<i class="fas fa-times-circle" style="color: #fff;" id="close-btn"></i>
<p class="failed-text">Please type a valid to do</p>
</div>
<div class="content">
<ul id="list" class="list"></ul>
</div>
<div class="add-item">
<input type="text" class="input" id="input" placeholder="Add something to do">
<i class="fas fa-plus-circle fa-lg" id="button" onclick="addTask()"></i>
</div>
</div>
<script defer src="https://kit.fontawesome.com/09faf5376a.js" crossorigin="anonymous"></script>
<script defer src="app.js/app.js"></script>
</body>
</html>
为了让 fontawesome 工作,有几件事需要正确。1.库的url是否正确嵌入
将包含排版(图标)的元素必须包含类 fa 和特定图标的类
class="fa fa-check-circle"
所有图标都包含 fa-iconname 3。在某些情况下,仅嵌入一个像“regular”这样的库会导致您使用其他类型的类,例如
在所有情况下,要显示图标,您只需更改并添加相关图标的类。
“方格”问题是由于 fontawesome 所组成的字体(因此它的名称为“Font难以置信”)没有正确加载。检查浏览器控制台并确认没有 404 错误(这表明您添加了 url 但它不正确或文件不存在)。
另一方面,如果您添加更多信息和您在 html 中使用的代码会更好。
创建类后,您必须先添加类
far
或fas
元素i
。没有它,当您尝试更改它时,将出现一个框而不是图标。修复将如下所示:
我希望它对你有帮助。