我有一个文本区域，我可以通过按 Enter 键在其中写入文本。文本正在添加到 UL。
我有 2 个按钮:编辑 和删除。此时，两个按钮都将 LI 从 UL 中删除。我希望删除按钮保持原样，但编辑按钮将当前按下的 LI 复制到文本区域。
然后我将能够在那里更改文本，并且当再次按下输入/发送按钮时，它将编辑当前的特定 LI。我尝试过使用 JQUERY 来做到这一点。
这是html代码:
<!DOCTYPE html>
<html>
<head>
<title>list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
div.a {
margin: 0;
position: absolute;
top: 50%;
left: 40%;
margin-right: -50%;
}
div.b {
margin: 0;
position: absolute;
top: 50%;
left: 55%;
margin-right: -50%;
}
div.c {
margin: 0;
position: absolute;
top: 45%;
left: 40%;
margin-right: -50%;
}
textarea#textBox {
width: 100%;
display: block;
max-width: 100%;
line-height: 1.5;
padding: 15px 15px 30px;
border-radius: 3px;
border: 1px solid #F7E98D;
transition: box-shadow 0.5s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background: linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
}
li:hover {
background-color: lightblue;
}
</style>
<div class="a">
<textarea id="textBox"></textarea>
<ul id="dynamic-list"></ul>
</div>
<div class="b">
<button type="button" onclick=addItem()>Send</button>
</div>
<div class="c">
<input type="text" id="textName" value="" />
</div>
<script
src="scriptt.js">
$(document).ready(function () {
$("li").click(function () {
$("li").remove();
});
});
</script>
</body>
</html>
这是 JavaScript 代码:
function addItem() {
var ul = document.getElementById("dynamic-list");
var name = document.getElementById("textName");
var candidate = document.getElementById("textBox");
var li = document.createElement("li");
li.setAttribute("id", "li");
var removeBtn = document.createElement("button");
removeBtn.setAttribute("id", "remove");
//editBtn.setAttribute("id", "edit");
var editBtn = document.createElement("button");
removeBtn.innerHTML = "remove";
editBtn.innerHTML = "edit";
if (name.value != "") {
li.appendChild(document.createTextNode(name.value + ": " + candidate.value));
ul.appendChild(li);
li.appendChild(removeBtn);
li.appendChild(editBtn);
document.getElementById('textBox').value = "";
}
}
var input = document.getElementById("textBox");
input.addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode == 13 && !event.shiftKey && document.getElementById('textBox').value != "") {
addItem();
input.text = "";
if (event.preventDefault) {
event.preventDefault();
}
}
if (event.keyCode == 13 && event.shiftKey) {
if (evt.type == "keypress") {
pasteIntoInput(this, "\n");
}
evt.preventDefault();
}
});
$(document).ready(function () {
$("body").on("click", "li", function () {
$(this).remove();
});
});
最佳答案
尝试使用以下解决方案。可以通过类名和动态CreatedID事件进行归档
var cnt =0;
$(document).ready(function () {
// For Delete
$(document).on('click', '.remove', function(){
$(this).closest('li').remove();
});
//For Edit
$(document).on('click', '.edit', function(){
var selVal = $(this).closest('li').find('span').text();
if(selVal != "")
{
var test = selVal.split(':');
$("#textName").val(test[0]);
$("#textBox").val(test[1]);
$("#updatedId").val($(this).closest('li').attr("id"))
}
});
var input = document.getElementById("textBox");
input.addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode == 13 && !event.shiftKey && document.getElementById('textBox').value != "") {
addItem();
input.text = "";
if (event.preventDefault) {
event.preventDefault();
}
}
if (event.keyCode == 13 && event.shiftKey) {
if (evt.type == "keypress") {
pasteIntoInput(this, "\n");
}
evt.preventDefault();
}
});
});
function addItem() {
var ul = document.getElementById("dynamic-list");
var name = document.getElementById("textName");
var candidate = document.getElementById("textBox");
var li = document.createElement("li");
li.setAttribute("id", "li_"+cnt);
var removeBtn = document.createElement("button");
removeBtn.setAttribute("class", "remove");
var editBtn = document.createElement("button");
removeBtn.innerHTML = "remove";
editBtn.innerHTML = "edit";
editBtn.setAttribute("class", "edit");
if (name.value != "") {
var x = document.createElement("SPAN");
var t = document.createTextNode(name.value + ": " +candidate.value);
x.appendChild(t);
li.appendChild(x);
ul.appendChild(li);
li.appendChild(removeBtn);
li.appendChild(editBtn);
}
cnt++;
}
function callfunction()
{
if( $("#updatedId").val() == "")
{
addItem();
}
else{
var name = document.getElementById("textName");
var candidate = document.getElementById("textBox");
var liID = $("#updatedId").val();
$("#"+liID ).find('span').text(name.value + ": " +candidate.value);
$("#updatedId").val("");
}
document.getElementById("textName").value="";
document.getElementById("textBox").value="";
} div.a {
margin: 0;
position: absolute;
top: 50%;
left: 40%;
margin-right: -50%;
}
div.b {
margin: 0;
position: absolute;
top: 50%;
left: 55%;
margin-right: -50%;
}
div.c {
margin: 0;
position: absolute;
top: 45%;
left: 40%;
margin-right: -50%;
}
textarea#textBox {
width: 100%;
display: block;
max-width: 100%;
line-height: 1.5;
padding: 15px 15px 30px;
border-radius: 3px;
border: 1px solid #F7E98D;
transition: box-shadow 0.5s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background: linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
}
li:hover {
background-color: lightblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<textarea id="textBox"></textarea>
<ul id="dynamic-list"></ul>
</div>
<br/>
<div class="c">
<input type="text" id="textName" value="" /> <button type="button" onclick="callfunction()">Send</button>
</div>
<input type="hidden" id="updatedId">关于javascript - 使用按钮编辑 UL 内的动态 LI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50715668/