Question

每当我点击编辑按钮时，我想将一定数量的span元素转换为输入框，当我点击另一个时，我想回到span，但我遇到了一些问题：

这是我的小提琴：

我的代码：

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按钮时，控制台出现错误：

未捕获的TypeError：无法读取未定义的属性“createDocumentFragment”
this的范围将是window而不是span

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

要解决此问题，您可以在所有span / 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属性。

Answer 2

只需在switchtoInput函数中用$（'span＃'+ id_value）替换$（this）即可。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用jquery将跨度转换为输入框

2 个答案: