个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在处理一个待办事项列表，您可以在其中的框中键入一个任务，然后单击添加按钮将项目输入到列表中。但是，我的列表中没有添加任何内容，而且我无法弄清楚我的代码有什么问题。
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="css/fzm-notebook.texture-25.jpg" no-repeat;>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>
</body>
</html>最佳答案
在 JS 中不能有多行字符串。您似乎知道这一点，但是您忘记了将它们与加号连接起来。这是有问题的部分:
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
只需在除最后一行之外的每一行末尾添加一个+。
除此之外，您的代码看起来不错，让我们试试看:
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">' +
'<div>' +
'<input type="checkbox" class="check_todo" name="check_todo"/>' +
'</div>' +
'<div class="todo_description">' +
todoDescription +
'</div>' +
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>关于javascript - JQuery 待办事项列表未运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35375043/
24
4
0
我是一名优秀的程序员,十分优秀！