javascript - 如何使用 jQuery 制作可编辑的 UL LI 列表？

Question

我有件事需要你的帮助。我正在尝试为用户添加能够通过单击 LI 元素来实时编辑 UL LI 列表的功能。然后，单击 LI 元素后，该元素将更改为具有 LI 当前文本值的输入框元素。

然后，当用户点击 LI 元素时，输入框消失，LI 元素返回到其正常状态，并带有新更新的值。

我正在尝试完成上述操作，但是，在我的代码的当前状态下，它只是添加了另一个框，实际上不允许我在其中单击以添加新值。而且，当我点击一个新的 LI 元素时，它只会继续添加另一个框等等。

这是一个 fiddle : https://jsfiddle.net/0o0n8rea/

这是有问题的代码:

window.onload = function() {

    $("#refdocs_list li").click(function(){

        $(this).html('<input type="text" value='+ $(this).text() +'>').focus()

    });

    $("#refdocs_list li").focusout(function(){

    });

}

这是 HTML 标记:

<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">

    <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">

        <li>test1</li>
        <li>test2</li>
        <li>test3</li>

    </ul>

</div>

Answer 1

您可以使用 span 包裹您的文本，然后使用 input 替换该元素，反之亦然，使用 jQuery 的 replaceWidth() 和作为选择器的通用属性，例如 data-id="editable-list-item" 或其他。

类似于此:

$("#refdocs_list li").on('click', 'span[data-id="editable-list-item"]', function() {
  var $input = $('<input type="text" data-id="editable-list-item">');
  $input.val($(this).html());
  $(this).replaceWith($input);
  $input.focus();
});

$("#refdocs_list li").on('focusout', 'input[data-id="editable-list-item"]', function() {
  var $span = $('<span data-id="editable-list-item">');
  $span.html($(this).val());
  $(this).replaceWith($span);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
  <li><span data-id="editable-list-item">test1</span></li>
  <li><span data-id="editable-list-item">test2</span></li>
  <li><span data-id="editable-list-item">test3</span></li>
</ul>