如何使用jQuery製作可編輯的UL LI列表？

我需要你的幫助。我試圖嘗試添加能夠讓用戶能夠通過點擊LI元素來實時編輯UL LI列表。然後，單擊LI元素後，該元素將改爲LI的當前文本值的輸入框。如何使用jQuery製作可編輯的UL LI列表？

然後，當用戶點擊LI元素時，輸入框消失，LI元素返回到其具有新更新值的正常狀態。

但是，我試圖完成上述操作，但是，與我的代碼的當前狀態一樣，它只是添加了另一個框，並且實際上不允許我在其內部單擊以添加新值。而且，當我點擊一個新的LI元素時，它會繼續添加另一個元素，等等。

這裏有一個小提琴： 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>

來源

2017-08-31 BobbyJones

你可以環繞你的文字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>

來源

2017-08-31 16:09:29 Nope

讓事情簡單，contenteditable屬性添加到元件。

的jsfiddle

Fiddle

來源

2017-08-31 15:58:00 Script47

我想給用戶一個編輯框的外觀和感覺，雖然。 – BobbyJones

@BobbyJones然後點擊只需將一個類添加到活動元素，以給出一個突出的設計。 – Script47

能像這樣對你的工作？

<ol contenteditable="true"> 
 
    <li> 
 
    Line 1 
 
    </li> 
 
    <li> 
 
    Line 2 
 
    </li> 
 
</ol>

來源

2017-08-31 16:01:11

-1

參見下文實施例：

$("li").click(function(){ 
 
\t 
 
\t \t $(this).html('<li><input type="text" value="'+ $(this).text() +'"></li>').focus() 
 
\t 
 
\t }); 
 
\t 
 
\t $("#refdocs_list li").focusout(function(){ 
 

 
\t });

input[type='text']{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;"> 
 
\t 
 
\t \t <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"> 
 
\t \t 
 
\t \t \t <li>test1</li> 
 
\t \t \t <li>test2</li> 
 
\t \t \t <li>test3</li> 
 
\t \t 
 
\t \t </ul> 
 
\t \t 
 
\t </div>

來源

2017-08-31 16:04:35

我無法編輯該值。 – BobbyJones

你想做什麼？ –

下面是一個簡單，工作溶液。這並不理想，但應該是一個很好的起點。

$('li').on('click',function() { 
 
    $(this).children('.value').addClass('hidden'); 
 
    $(this).children('.edit').removeClass('hidden'); 
 
}); 
 

 
$('.edit').on('change',function() { 
 
    $(this).siblings('.value').html($(this).val()); 
 
    $('.edit').addClass('hidden'); 
 
    $('.value').removeClass('hidden'); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <span class="value">Value 1</span> 
 
    <input class="edit hidden" type="text" value="Value 1" /> 
 
    </li> 
 
    <li> 
 
    <span class="value">Value 2</span> 
 
    <input class="edit hidden" type="text" value="Value 2" /> 
 
    </li> 
 
    <li> 
 
    <span class="value">Value 3</span> 
 
    <input class="edit hidden" type="text" value="Value 3" /> 
 
    </li> 
 
</ul>

來源

2017-08-31 16:06:38

如何使用jQuery製作可編輯的UL LI列表？

回答

相關問題