Question

现在我在没有jQuery的Javascript中有这个：

它的工作正常，但我希望使用jQuery使代码更简单，更短。

我想要与上面的示例完全相同的事情，当您单击文本时，它应该变成输入字段。在模糊时，它应该显示您在框中编辑的内容，然后创建一个变量（如上面示例中的e.value），以便稍后在ajax调用中发送它。

我如何在jQuery中执行此操作？

Answer 1

或者你也可以通过这样的方式自己开始类似的事情：

$('span.editable').click(function() {
   var input = $('<input type="text" />', {
      value: $(this).text()
   }).click(function() {
      $.get('editsave.php?tekstny=' + $(this).value(), function(response) {
         var span = $('span', {
            text: response
         });
         $(this).replaceWith(span);
      });
   });
   $(this).replaceWith(input);
});

Answer 2

通过单击编辑按钮可编辑标题或按钮，键入您自己的文本，然后单击确定以替换您的文本。

＆＃13;

function editable() {
  var h1 = document.getElementsByTagName("H1")[0];
  var att = document.createAttribute("contenteditable");
  att.value = "true";
  h1.setAttributeNode(att);
}

function noteditable() {
  var h1 = document.getElementsByTagName("H1")[0];
  var att = document.createAttribute("contenteditable");
  att.value = "flase";
  h1.setAttributeNode(att);
}

function editable2() {
  var input = document.getElementsByTagName("input")[0];
  var att = document.createAttribute("type");
  att.value = "text";
  input.setAttributeNode(att);
}

function noteditable2() {
  var input = document.getElementsByTagName("input")[0];
  var att = document.createAttribute("type");
  att.value = "button";
  input.setAttributeNode(att);
}
$('.my-button').click(function() {
  $(".my-textbox").focus()
});
$('.my-button2').click(function() {
  $(".button").focus()
});

＆＃13;

body {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class='my-textbox' contenteditable="false">Hello World</h1>

<button class='my-button' onclick="editable()">Edit</button>
<button onclick="noteditable()">OK</button>

<br>
<br>
<br>

<input type="button" class="button" value="Hello World" />

<br>
<br>

<button class='my-button2' onclick="editable2()">Edit</button>
<button onclick="noteditable2()">OK</button>

＆＃13;

jQuery：onclick，编辑字段和show +保存到变量中

2 个答案:

通过单击编辑按钮可编辑标题或按钮，键入您自己的文本，然后单击确定以替换您的文本。