单击图标更新操作

Question

$(document).ready(function() {
 $('.edit-name').on('click', function(){
  $(this).closest('div').find('span,input').toggle();
 });
 var name = $('#name').val();    
 $('#submit').on('click', function(){
   $('#result').html($('#name').val());     
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<button type='submit' id="submit"> Save </button>
<div class="editable">
  <span>First Name</span>
  <input type="text" id="name" name="name" value="First Name" style="display:none;"/>
  <i class="fa fa-pencil-square-o fa-lg edit-name" aria-hidden="true">edit</i>
</div>

我正在尝试弄清楚它是如何工作的，因此非常感谢您的帮助。

我有以下代码片段：

<?php
 echo $name . '<i class="fa fa-pencil-square-o" aria-hidden="true"></i>';
 echo $Age . '<i class="fa fa-pencil-square-o" aria-hidden="true"></i>';
?>

我应该可以单击该图标并使用 AJAX 更改该变量。我自己可以毫无问题地弄清楚 ajax 部分。

我在尝试弄清楚是应该只获取 $name 还是应该获取 <input>.

时遇到问题

Answer 1

改变你的HTML喜欢，

<div class="editable">
   <span><?php echo $name?></span>
   <input type="text" name="name" value="<?php echo $name?>" style="display:none"/>
   <i class="fa fa-pencil-square-o edit-name" aria-hidden="true"></i>
<div>

并在 jQuery、

$(function(){
     $('.edit-name').on('click',function(){
         $(this).closest('div').find('span,input').toggle();
     });
});

然后更改文本框中的名称字段并使用 AJAX 提交。

更新， 更改您的提交点击事件，例如，

$('#submit').on('click', function(){
   $('#result').html($('#name').val());
});

单击图标更新操作

Update operation onClick of an icon

php

ajax

jquery

crud