Question

我有一个待办事项清单，我可以交换，删除和编辑我的李。

现在我使用contenteditable prop来编辑我的编辑功能。当我按下editButton并将输入保存在列表中时，如果我再次按editButton，我想用输入替换它，但我不知道该怎么做。

这是我的HTML代码：

＆＃13;

var aux = 0;

$(document).ready(
  function() {
    $('#button').click(
      function() {
        var toAdd = $('input[name=listItem]').val();
        var editTxt = $('<input type="text"/>');
        if (toAdd == '')
          alert("U must input something!");
        else {
          $("#list").append('<li><span>' + toAdd + " </span>  <button class='edit'>" + "Edit</button>" +
            " <button class='delete'>" + "Delete</button></li>");
          $('input').val("");
        }
      });


    $(document).on('click', '.delete', function() {
      $(this).closest("li").fadeOut('slow', function() {
        $(this).remove();
      });
    });


    $(document).on('click', '.edit', function() {
      if ($(this).closest("li").find("span").prop("contenteditable") == "true")
        $(this).closest("li").find("span").prop("contenteditable", false).focus();
      else
        $(this).closest("li").find("span").prop("contenteditable", true).focus();
    });

    $('ol').sortable();
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

</head>

<body>
  <h>My list:</h>
  <form name="toDoList">
    <input type="text" name="listItem" />
  </form>

  <button id="button">Add</button>
  <br/>
  <ol id="list"></ol>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="v4.js" type="text/javascript"></script>
</body>

＆＃13;

Answer 1

只需添加input输入和span。在编辑单击检查是否可见范围，然后显示带有跨度html的input，如果隐藏，则将var aux = 0; $(document).ready( function() { $('#button').click( function() { var toAdd = $('input[name=listItem]').val(); var editTxt = $('<input type="text"/>'); if (toAdd == '') alert("U must input something!"); else { $("#list").append('<li><span>' + toAdd + "</span> <input hidden></input><button class='edit'>" + "Edit</button>" + " <button class='delete'>" + "Delete</button></li>"); $('input').val(""); } }); $(document).on('click', '.delete', function() { $(this).closest("li").fadeOut('slow', function() { $(this).remove(); }); }); $(document).on('click', '.edit', function() { /* if ($(this).closest("li").find("span").prop("contenteditable") == "true") $(this).closest("li").find("span").prop("contenteditable", false).focus(); else $(this).closest("li").find("span").prop("contenteditable", true).focus(); */ if ($(this).closest("li").find("span").is(':visible')) { var val = $(this).closest("li").find("span").html(); $(this).closest("li").find("span").hide(); $(this).closest("li").find("input").show(); $(this).closest("li").find("input").val(val); $(this).html("Save"); } else { var val = $(this).closest("li").find("input").val(); $(this).closest("li").find("input").hide(); $(this).closest("li").find("span").show(); $(this).closest("li").find("span").html(val); $(this).html("Edit"); } }); $('ol').sortable(); } );值替换为span并隐藏输入字段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

</head>

<body>
  <h>My list:</h>
  <form name="toDoList">
    <input type="text" name="listItem" />
  </form>

  <button id="button">Add</button>
  <br/>
  <ol id="list"></ol>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="v4.js" type="text/javascript"></script>
</body>

[{name: 'foo', age: 43}, {name: 'bar', age: 55}].map(
    o => ({[o.name]: o.age})).reduce((a, b) => Object.assign(a,b), {})

Answer 2

尝试this，

 $(document).on('click', '.edit', function() {
      var span = $(this).parent().children(':first-child'); // gets the first input (edit input)
      if (span.children().length > 0) { // checks if it is edit mode or not
        var spanText = span.children(':first-child').val(); // gets the inputs value
        span.html(spanText); // set it to input
      } else {
        var spanText = span.text(); // get span input 
        var input = "<input value=" + spanText + ">"; // set it to input for edit
        span.html(input); // paste inside span
      }
    });

希望有所帮助，

将动态创建的li编辑为待办事项列表的输入jquery

2 个答案: