Javascript:使用jquery编辑预览

编程入门 行业动态 更新时间:2024-10-12 01:30:26
本文介绍了Javascript:使用jquery编辑预览的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我有2个div,第一个有显示内容的标签,但是当你点击编辑按钮时,它应该显示div =edit和第1个标签的内容链接到它的输入(相同的id)。

I have 2 divs, the first one has the label with the content to show, but when you click the "edit" button, it should show you the div="edit" and the content of the 1st label inside of the input that is linked to it (same id).

另一方面,我看到当你在输入内输入内容的网站时,预览的原始标签div正在实时更新。

By the other way, I saw sites that when you type something inside that input, the original label of the "preview" div is getting updated in realtime.

有人可以帮助我使用脚本吗?谢谢!

Could someone help me with the script? Thank you!

<html> <body> <div id="preview"> <label id="companyName" class="workExperience"> This is my company </label> <label id="companyCountry" class="workExperience"> This is my company Country </label> <input type="button" value="edit"/> </div> <div id="edit"> <label>Company Name: </label> <input type="text" id="companyName" /> <label>Company Country: </label> <input type="text" id="companyCountry" /> </div> </body> </html>

推荐答案

您可以使用以下内容。请注意,虽然我将字段的ID更改为不同。在同一页面上为同一个id提供多个控件并不是一个好习惯。有些浏览器无法使用它,反正它真的没有意义。

You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn't make sense anyways.

$(document).ready( function() { $("#companyNameText").keypress( function() { $("#companyNameLabel").html(this.value); }); $("#companyCountryText").keypress( function() { $("#companyCountryLabel").html(this.value); }); });

更多推荐

Javascript:使用jquery编辑预览

本文发布于:2023-11-28 12:16:41,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1642362.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:编辑   Javascript   jquery

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!