javascript - 如何在页面上提交新项目?(jQuery)
问题描述
为学校做项目。我必须能够将杂货项目添加到列表中,其中包含新项目的框内的控件“检查”和“删除”。清单上已有 4 项供参考。我已经尽可能地添加了盒子,里面有食物,但我似乎无法得到里面的按钮,以及与列表中其他人相同的字体和样式。
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li>' + textInput + '</li>')
});
};
$(addItem);
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list > li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
解决方案
您在 jquery 中缺少代码。替换代码并检查
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li><span class="shopping-item ">' + textInput +'</span><div class="shopping-item-controls"><button class="shopping-item-toggle"><span class="button-label">check</span></button><button class="shopping-item-delete"><span class="button-label">delete</span></button></div></li>')
});
}
$(addItem);``
推荐阅读
- java - JFileChooser 按钮自定义
- reactjs - 制作卡片(或纸张)不占用全宽 Material UI
- c# - 将表单转换为高质量的图像
- ssas - 多个维度的度量的 TOTAL 的计算成员
- entity-framework - Entity Framework TPH 检测鉴别器列
- .net - .net mvc 特殊字符输出
- libtorrent - 慢速磁盘的 Libtorrent 设置
- c++ - 普通循环未使用 gcc 4.8.5 自动矢量化
- node.js - 将 Angular CLI 升级到最新版本?
- java - 如何在 Eclipse 中为 SQL Server JDBC 驱动程序配置集成身份验证?