Javascript 将新文本添加到待办事项列表时出现问题

为什么当我添加新文本时，它会添加到所有元素中

$（'btn'）。在（'click'，function（）上{
让newTask=$（“#输入文本”）；
如果（newTask.val（）=''）{
警惕（“你需要写点什么”）；
}否则{
让editButton=（'Edit'+''）；
让finishedButton=（'Finished'+''）；
让deleteButton=（'Delete'+''）；
让输入=（“”）；
$（“#toDoList”）.append（“
”+input+editButton+finishedButton+deleteButton+”
）；
$（'.input'）.attr（'value'，newTask.val（））；
newTask.val（“”）；
}
$（'.edit'）。在（'click'，function（）上{
$（'.input'）.prop（'disabled'，false）；
});
$（'.finished'）。在（'click'，function（）上{
$（this.parent（）；
$（“#已完成”）.append（$（this.parent（））；
});
$（'.delete'）。在（'click'，function（）上{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
});
});
正文{
背景色：；
}
.集装箱{
显示：块；
宽度：400px；
利润率：300px自动；
盒影：5px10px100px#8888888；
最小高度：450px；
最大高度：自动；
}
.完成{
边缘顶部：3rem；
}
.待办事项{
边缘顶部：3rem；
}
#btn{
光标：指针；
}
.输入{
页边空白：
}
.文本{
文本对齐：居中；
颜色：#004690；
}
.颜色{
颜色：绿色；
}
.color1{
颜色：红色；
}
#输入文本{
左边距：100px；
}
人力资源{
宽度：50%；
边缘底部：1rem；
}

待办事项
待办应用

添加
待办事项清单



完整的



您的代码中有几个问题超出了问题的范围，我决定忽略这些问题

问题在于这一行，它使用a选择所有输入并更新其值

$('.input').attr('value', newTask.val());

最简单的解决方案是使用字符串插值创建包含值的输入标记，如下所示：


$（'btn'）。在（'click'，function（）上{
让newTask=$（“#输入文本”）；
如果（newTask.val（）=''）{
警惕（“你需要写点什么”）；
}否则{
让editButton=（'Edit'+''）；
让finishedButton=（'Finished'+''）；
让deleteButton=（'Delete'+''）；
//使用字符串插值创建具有已定义值的输入标记
让输入=``；
//照常追加
$（“#toDoList”）.append（“
”+input+editButton+finishedButton+deleteButton+”
）；
//下面的行不再需要，因此被注释掉
//$（'.input'）.attr（'value'，newTask.val（））；
//您的代码继续未修改
newTask.val（“”）；
}
$（'.edit'）。在（'click'，function（）上{
$（'.input'）.prop（'disabled'，false）；
});
$（'.finished'）。在（'click'，function（）上{
$（this.parent（）；
$（“#已完成”）.append（$（this.parent（））；
});
$（'.delete'）。在（'click'，function（）上{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
});
});
正文{
背景色：；
}
.集装箱{
显示：块；
宽度：400px；
利润率：300px自动；
盒影：5px10px100px#8888888；
最小高度：450px；
最大高度：自动；
}
.完成{
边缘顶部：3rem；
}
.待办事项{
边缘顶部：3rem；
}
#btn{
光标：指针；
}
.输入{
页边空白：
}
.文本{
文本对齐：居中；
颜色：#004690；
}
.颜色{
颜色：绿色；
}
.color1{
颜色：红色；
}
#输入文本{
左边距：100px；
}
人力资源{
宽度：50%；
边缘底部：1rem；
}

待办事项
待办应用

添加
待办事项清单



完整的



此行导致：
$（'.input'）.attr（'value'，newTask.val（））。它将
newTask.val（）
放在所有元素中，这些元素的类为
input
！为了使我的样本在测试后更加完整，我在中添加了这一点，但忽略了对其进行注释。谢谢你的提醒@MohamadAlhanbali，感谢我投票并将其作为答案；-）我也加了一个，因为你的答案太棒了。模板文字的胜利！