编辑并保存输入

Question

我有一个待办事项清单。我想要的是，当我点击任务时，他会输入然后是保存按钮，但我不知道下一步如何，如何在列表中放回相同的保存任务?

另外，我知道我需要添加li的ID，但是如何添加每个新的liID?

// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'></i></span>" + list + "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
$('.input').val($(this).text());
$('.add').html('Save')
});
$('.add').on('click', function() {
$('.add').html('Add');
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add">Add</button><button type="reset" class="reset">Clear</button>
<ul>
<li>
</li>
</ul>
</form>
</div>

Answer 1

您可以使用点击li的index并将其保存在一些变量中，当您点击save按钮时，使用此index为所需的li添加值。

演示代码 :

// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'> </i></span>" + list + "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
var indexs;
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
indexs = $(this).index() //get index of li clicked
$('.input').val($(this).clone().children().remove().end().text().trim());
$('.add').html('Save')
});
$('.add').on('click', function() {
listState = 'add';
if ($(this).text() == "Save") {
//use index to add htmls 
$("li:eq(" + indexs + ")").html("<span><i class='fa fa-trash-o'> </i></span>" + $('.input').val())
$('.add').html('Add');
$('.input').val('')
}
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add" type="button">Add</button><button type="reset" class="reset">Clear</button>
<ul>
</ul>
</form>
</div>

另一种方法是使用数据属性.因此，每当您的li被单击设置标志值为true，然后使用此数据属性将值保存到所需的li。

演示代码 :

// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'> </i></span>" + list + "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
$('.input').val($(this).clone().children().remove().end().text().trim());
$(this).attr("data-edit", true); //add data attribute true
$("li").not($(this)).attr("data-edit", false); //other li to false
$('.add').html('Save')
});
$('.add').on('click', function() {
listState = 'add';
if ($(this).text() == "Save") {
$("[data-edit=true]").html("<span><i class='fa fa-trash-o'> </i></span>" + $('.input').val()) //use same to add new content
$('.add').html('Add');
$('.input').val('')
}
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add" type="button">Add</button><button type="reset" class="reset">Clear</button>
<ul>
</ul>
</form>
</div>