Question

当我点击 Edit 按钮时，我试图将每个div中的所有li元素都变成一个输入。然后，当单击保存时，所有输入将还原为div，并保存输入中的新值。我的问题是，最高输入值被保存到所有div元素中。我希望每个值都保存到自己的div中。例如，如果顶部li div保持不变，而底部则更改为新值，则该新值将仅保存到底部li div。

这是很新的东西，所以任何帮助将不胜感激！

function toInput() {
    var inner = document.querySelector('.listItem div');
    console.log(inner);
    $('.listItem div').replaceWith('<input value="' + inner.innerHTML + '">' );  
}

function saveInput() {
    var inputVal = $('.listItem input').val();
    console.log(inputVal);
    $('.listItem input').replaceWith('<div>' + inputVal + '</div>' );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<ul id="data">
    <li class="listItem">
        Test 1: <div>Item 1</div>
    </li>
    <li class="listItem">
        Test 2: <div>Item 1</div>
    </li>
</ul>
<button class='save' onclick="saveInput();">Save</button>
<button class='edit' onclick="toInput();">Edit</button>

Answer 1

您必须像这样遍历选定的输入：

function toInput() {
  var inner = document.querySelector('.listItem div');
  console.log(inner);
$('.listItem div').replaceWith('<input value="' + inner.innerHTML + '">' );  
}

function saveInput() {
  var inputVal = $('.listItem input');
  inputVal.each(function(i, input) {
    $(input).replaceWith('<div>' + $(input).val() + '</div>' );
  });
  console.log(inputVal);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<ul id="data">
      <li class="listItem">
       Test 1: <div>Item 1</div>
      </li>
      <li class="listItem">
       Test 2: <div>Item 1</div>
      </li>
      </ul>
      <button class='save' onclick="saveInput();">Save</button>
      <button class='edit' onclick="toInput();">Edit</button>

Answer 2

您的代码应该像

function saveInput() {
  $(".listItem").each(function(){
   text = '<div>'+$(this).find('input').val()+'</div>'; // Capture the data first and store in a variable called as text. Enclose it with div tags as for second round you need that.
   $(this).find('input').remove(); // remove the input
   $(this).append(text); // append the text to listItem
  })

我对内置代码段不满意。

这是您的参考工作jsfiddle https://jsfiddle.net/qyL6r341/

Answer 3

function toInput() {
  var inner = document.querySelectorAll('.listItem div');
  $(inner).each(function( index ) {
    $(this).replaceWith('<input value="' + $(this).text()+ '">' );
  });
}

function saveInput() {
  var inner = document.querySelectorAll('.listItem input');
  $(inner).each(function( index ) {
    $(this).replaceWith('<div>' + $(this).val()+ '</div>' );
  });
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<ul id="data">
      <li class="listItem">
       Test 1: <div>Item 1</div>
      </li>
      <li class="listItem">
       Test 2: <div>Item 2</div>
      </li>
      </ul>
      <button class='save' onclick="saveInput();">Save</button>
      <button class='edit' onclick="toInput();">Edit</button>

如何将<li>更改为<input />然后重新更改为</li> <li>？

3 个答案: