使用 jquery 代码使用原始输入框编辑单个列表项？

Question

我发现此代码非常有问题，因为它不会仅编辑单个列表项（单击的项），而是一次将所有列表项编辑到相同的输入。任何建议表示赞赏。小提琴链接如下：

https://jsfiddle.net/hufflepuff_hamlet/hy564btq/8/

<div>
        <form name="checkListForm" class="edit-form">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button1" value="button">Add!</div>
        <div id="button2" value="button">Edit!</div>
        
        
        <p></p>
        <div class="list" id="item"></div>


        <p>[Click item on list to edit item]</p>
        <p>[Doubleclick item on list to remove item]</p>
        
    </div> 
   </div>

//adding an item to the list
$(document).ready(function(){
    $('#button1').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append("<div class='item'>" + toAdd + "</div>" + "<br>");
    });
    
    $('.list').click(function(){   
    });

//removing an item from the list by double-clicking on it
    $(document).on('dblclick', '.item', function(){
    $(this).remove();
});

//editing an item from the list by clicking on it and the edit button
$(document).on('click', '.item', function(){
    var toAdd = $('input[name=checkListItem]').val();
    $(this).text();
    $(input).text(content);
    $(this).remove();
    $('#button2').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('.item').replaceWith("<div class='edit-form'>" + toAdd + "</div>" + "<br>");
   
    });

    $('.item').click(function(){   
    });
});
});

Answer 1

你需要使用 contenteditable 全局属性

https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable

$(document).ready(function(){
  // add new item
  $('#button1').click(function(){
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append("<div class='item unselectable'>" + toAdd + "</div>" + "<br>");
  });

  //removing an item from the list by dobuble clicking on it
  $(document).on('dblclick', '.item', function(){
    $(this).remove();
  });

  //editing an item from the list by clicking on it, editing, clicking edit button
  $(document).on('click', '.item', function() {
    var $currentItem = $(this);
    var isEditable = $currentItem.is('.editable');

    // check if editing input already exist
    if (!$currentItem.is('.editable')){
      // make content editable
      $currentItem.prop('contenteditable',!isEditable).toggleClass('editable');
      $currentItem.removeClass('unselectable');
    }
  });
  
  // clicking button edit
  $(document).on('click', '#button2', function() {
    $('.item').prop('contenteditable', false).removeClass('editable').addClass('unselectable');
  });  
});

form {
  display: inline-block;
}

body {
  color: rgb(43, 61, 119);
  font-family: garamond;    
}

a:hover {
 background-color: rgb(108, 86, 190);
}

#button1{
  display: inline-block;
  height:20px;
  width:70px;
  background-color:#5979b4;
  font-family:arial;
  font-weight:bold;
  color:#ffffff;
  border-radius: 5px;
  text-align:center;
  margin-top:2px;
}

#button2{
  display: inline-block;
  height:20px;
  width:70px;
  background-color: whitesmoke;
  font-family:arial;
  font-weight:bold;
  color:#5979b4;
  border-radius: 5px;
  text-align:center;
  margin-top:2px;
}

.list {
  display: inline-block;
  font-family:garamond;
  font-weight:bold;
  color:#3e549b;
}
.unselectable {
  cursor:pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.editable{ 
  background:#EAEAEA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <form name="checkListForm" class="edit-form">
        <input type="text" name="checkListItem"/>
    </form>
    <div id="button1" value="button">Add!</div>
    <div id="button2" value="button">Edit!</div>


    <p></p>
    <div class="list" id="item"></div>


    <p>[Click item on list to edit item, edit, click edit button]</p>
    <p>[Doubleclick item on list to remove item]</p>
</div>