javascript - 使用jquery将span变成输入框

Question

每当我单击编辑按钮时，我想将一定数量的跨度元素转换为输入框，并在单击另一个元素时返回到跨度，但我遇到了一些问题:

这是我的 fiddle :

Fiddle

我的代码:

HTML:

<span id="1">hedh</span>
<br />
<span id="2">2222eh3222222</span>
<br />
<span id="3">333333eh33333</span>
<br />
<span id="4">44444eher44444</span>
<br />
<span id="5">555555edgt5555</span>
<br />

<button id="edit_properties">Edit</button>
<button id="unedit_properties">Save</button>

JavaScript:

  var switchToInput = function(id_value) {
  var $input = $("<input>", {
    val: $(this).text(),
    type: "text"
  });
  $input.attr("ID", id_value);
  $(this).replaceWith($input);
  $input.select();
};
var switchToSpan = function(id_value) {
  var $span = $("<span>", {
    text: $(this).val()
  });
  $span.attr("ID", id_value);
  $(this).replaceWith($span);
  $span.on("click", switchToInput);
}
$("#edit_properties").on("click", function() {

    switchToInput(1);
    switchToInput(2);
    switchToInput(3);
    switchToInput(4);
    switchToInput(5);

});
 $("#unedit_properties").on("click", function() {

    switchToSpan(1);
    switchToSpan(2);
    switchToSpan(3);
    switchToSpan(4);
    switchToSpan(5);

});

Answer 1

您的代码存在几个问题:

• </br>元素应该是 <br />
• 数字 id属性值会导致某些浏览器出现问题。您应该将它们更改为字母数字。

• 当您单击edit时按钮，您在控制台中收到错误:

  Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

• this的范围将是window不是span

最后一点是您的代码的主要问题。

要解决此问题，您可以在所有 span 上放置一个公共(public)类。/input元素，并提供一个函数 replaceWith()构建适当的元素来执行替换。试试这个:

$("#edit_properties").on("click", function() {
  $('.editable-span').replaceWith(function() {
    return $("<input>", {
      val: $(this).text(),
      type: "text",
      id: this.id,
      class: 'editable-input'
    });
  });
});

$("#unedit_properties").on("click", function() {
  $('.editable-input').replaceWith(function() {
    return $("<span>", {
      text: this.value,
      id: this.id,
      class: 'editable-span'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s1" class="editable-span">hedh</span><br />
<span id="s2" class="editable-span">2222eh3222222</span><br />
<span id="s3" class="editable-span">333333eh33333</span><br />
<span id="s4" class="editable-span">44444eher44444</span><br />
<span id="s5" class="editable-span">555555edgt5555</span><br />

<button id="edit_properties">Edit</button>
<button id="unedit_properties">Save</button>

或者，您也不必费心 edit或save按钮，只需设置 contenteditable="true" span 上的属性元素。