Question

我正在使用jQuery创建简单的待办事项列表，并且遇到了如何通过双击来编辑li元素的内容的问题。我写了一个函数，但它不起作用。

以下是我的代码：http://jsfiddle.net/strangeviking/1vwho2ru/3/：

function addListItem() {
  var text = $('#new-text').val();
  $("#todolist").append('<li><input type="checkbox" class="edit" />' + text + ' <button class="delete">Delete</button></li>');
  $("#new-text").val('');
};

function deleteItem() {
  $(this).parent().remove();
}

function finishItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().css('textDecoration', 'none')
  } else {

    $(this).parent().css('textDecoration', 'line-through');
  }
}

function editItem(e) {
  var $input = $(e.target).closest('li').addClass('editing').find('.edit');
  $input.val($input.val()).focus();
}

$(function() {
  $('#new-text').keyup(function(e) {
    if (e.keyCode === 13) {
      addListItem();
    }
  });
  $(document).on('click', '.delete', deleteItem);
  $(document).on('click', '.edit', finishItem);
  $(document).on('dblclick', '.edit', editItem);
  $("#select_all").click(function() {
    $('input:checkbox').not(this).prop('checked', this.checked);
    if ($('li').css('textDecoration') == 'line-through') {
      $('li').css('textDecoration', 'none')
    } else {

      $('li').css('textDecoration', 'line-through');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>List</h1>

<input type="text" id="new-text" />
<ul id="todolist"></ul>
<br>
<input type="checkbox" id="select_all" />Select all

Answer 1

您可以使用HTML5的contenteditable属性，而不是使用双击进行编辑。

您所做的更改是在此行的文字周围添加span：

$("#todolist").append('<li><input type="checkbox" class="edit" /> <span contenteditable="true">' + text + ' </span><button class="delete">Delete</button></li>');

＆＃13;

function addListItem() {
  var text = $('#new-text').val();
  $("#todolist").append('<li><input type="checkbox" class="edit" /><span contenteditable="true">' + text + ' </span><button class="delete">Delete</button></li>');
  $("#new-text").val('');
};

function deleteItem() {
  $(this).parent().remove();
}

function finishItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().css('textDecoration', 'none')
  } else {

    $(this).parent().css('textDecoration', 'line-through');
  }
}

function editItem(e) {
  var $input = $(e.target).closest('li').addClass('editing').find('.edit');
  $input.val($input.val()).focus();
}

$(function() {
  $('#new-text').keyup(function(e) {
    if (e.keyCode === 13) {
      addListItem();
    }
  });
  $(document).on('click', '.delete', deleteItem);
  $(document).on('click', '.edit', finishItem);
  $(document).on('dblclick', '.edit', editItem);
  $("#select_all").click(function() {
    $('input:checkbox').not(this).prop('checked', this.checked);
    if ($('li').css('textDecoration') == 'line-through') {
      $('li').css('textDecoration', 'none')
    } else {

      $('li').css('textDecoration', 'line-through');
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>List</h1>
<input type="text" id="new-text" />
<ul id="todolist">
</ul>
<br>
<input type="checkbox" id="select_all" />Select all

＆＃13;

<子> fiddle

Answer 2

我找到了一些其他方法来改变元素。这是代码：

var oriVal;
    $("#todolist").on('dblclick', 'span', function () {
        oriVal = $(this).text();
        $(this).text("");
        $("<input type='text'>").appendTo(this).focus();
    });
    $("#todolist").on('focusout', 'span > input', function () {
        var $this = $(this);
        $this.parent().text($this.val() || oriVal);
        $this.remove(); // Don't just hide, remove the element.
    });

需要一些改进，例如，在编辑时使可编辑可见，并按“输入”提交，但它会使其成为基本功能。

jQuery编辑li元素的内容

2 个答案: