javascript - 如何隐藏/取消隐藏表格？

Question

我正在使用 jquery 并制作了一个表单，该表单无需刷新页面即可提交信息，但在 tutorial 中我遵循它必须首先显示一个表单供人们编辑，但我想要做的事情略有不同。

我想显示一个用户个人资料页面，然后在每个项目旁边有一个小的编辑链接，如果他们单击编辑，就会出现一个文本字段。我相信我可以在不刷新的情况下提交表单，但是如何在不刷新的情况下单击“编辑”按钮时显示表单？

关于如何完成此任务的任何想法，或者我应该搜索什么以学习如何执行此任务的更好方法？我浏览了 jquery 站点上的示例项目，但似乎没有一个通过单击来隐藏/取消隐藏。

Answer 1

这是我如何处理这个概念的一个简单示例，我将通过发布和验证以及所有其他一些服务器端脚本等跟进它，但这可以作为您总体上的垫脚石。几乎所有你要记住的是 javascript/jquery 都是烟雾和镜子，因为它所有处理的客户端你基本上需要处理你在屏幕上的内容，无论它是隐藏的还是其他的。在这种情况下，您有 2 个元素，一个默认显示，另一个隐藏，您可以创建一个逻辑，在选择一个元素时将一个元素隐藏在另一个元素之上，并分别对其中一个元素执行您需要的操作。

<div id="wrapper">
   <div id="container">
      <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
      <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
   </div>
</div>


<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});
</script>

DEMO