自从使用 Stack over flow 以来已经有一段时间了，很高兴回到它，这是我的问题。 我试图制作一个简单的待办事项列表(到目前为止我所做的事情的链接在这里:http://lamp.cse.fau.edu/~mcuervo5/p4/，当您“检查并查看源代码”时使用 Jquery 和 html 代码
我是一个简单的“To-DOList”，从头开始，已经完成了 90%(之后只需要做 Css 部分)。我的问题是尝试创建一个“编辑”按钮，其唯一目的是在将文本框添加到列表后编辑文本框内的文本。唯一的问题是如何编写函数以便人们编辑文本。我已经有了编辑按钮，但它位于删除功能内，我不知道必须输入什么才能让它编辑。谢谢你
PS:好的，我很难粘贴 Jquery 代码，所以只需单击上面的链接，从网站复制源代码 代码 /image/V7JJx.jpg 应该如下所示
另外，下次如何在此处粘贴 Jquery 代码，因为我正在阅读方向，但它仍然无法正确粘贴在堆栈溢出流上。谢谢你
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<h1> The Reminder Friend </h1>
<form>
<!-- textbox -->
<input type="text" id="textbox" >
<!--add button -->
<input type="button" id= "Sumbit_Button" value="Add">
<h3>Todo</h3>
<div id = "Complete"> </div>
<ul id="incomplete-tasks">
</ul>
</form>
<footer>
<h2> © Copyright Mauricio Cuervo</h2>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="p4.js"></script>
</body>
最佳答案
我采取的方法是 Shtut说。
$(document).ready( function() {
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span contenteditable="false">' + textbox_Value + "</span>"
+ '<input/ style="display: none" class="new-value">'
+ "<button type='button' class='delete'>Delete</button>"
+ "<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function () {
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function () {
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function (e) {
if(e.keyCode == 13){
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
</head>
<body>
<h1> The Reminder Friend </h1>
<form>
<input type="text" id="textbox">
<input type="button" id="Sumbit_Button" value="Add">
<h3>Todo</h3>
<div id="Complete"> </div>
<ul id="incomplete-tasks">
</ul>
</form>
<footer>
<h2> © Copyright Mauricio Cuervo</h2>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>关于Jquery 主题 : editing text on a To-Do-List after adding text，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42445653/