Question

我正在编辑一个编辑按钮，当我点击时，我可以通过输入字段编辑页面中的一些元素。因此，如果我单击带有类的元素.editable必须更改为输入字段，并且值必须是元素中的文本。当我再次单击保存（编辑）按钮时，必须将值更改为新值。

（我知道我必须将新数据保存在数据库中，但这并不重要。此页面就像编辑按钮必须如何工作的示例一样。）

这是我的html：

编辑按钮

<li>
    <p><strong>Phone number:</strong><span class="editable">Some text which can be edited.</span>
</li>

我的jQuery代码：

$("#edit").click(
   function() {
      $("#edit").text('Save');
      $(document).find('.editable').each(function() {
         $(this).replaceWith("<input>");
      });
});

Answer 1

试试这个：

$("#edit").click(function() {
    var $this = $(this);
    if($this.attr('editing') != '1') {
        $this.text('Save').attr('editing', 1);
        $(document).find('.editable').each(function() {
            var input = $('<input class="editing" />').val($(this).text());
            $(this).replaceWith(input);
        });
    }
    else {
        $this.text('Edit').removeAttr('editing');
        $(document).find('input.editing').each(function() {
            var div = $('<div class="editable" />').text($(this).val());
            $(this).replaceWith(div);
        });
    }
});

<强> See a Demo

jQuery用要输入的元素替换元素

1 个答案: