Question

我有一个文本区域，我按下回车来写文本。该文本正被添加到UL。

我有两个按钮：edit和remove。此时，两个按钮都从UL中删除了LI。我希望删除按钮保持原样，但编辑按钮将当前按下的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();
    });
});

Answer 1

尝试以下解决方案。您可以通过类名和动态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">

使用按钮在UL内编辑动态LI

1 个答案: