javascript - 单击锚标记时如何显示和隐藏输入?
问题描述
如何隐藏label
并显示单击input
时间Edit
并显示label
和隐藏单击input
时间Cancel
?
<label class="lblProfile">First Name: </label>
<label class="ansProfile">${resident.firstname}</label>
<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>
<a> Edit </a>
<a> Cancel </a>
谁能告诉我如何编码?
解决方案
像下面这样的东西应该可以解决问题。
function showhide(which){
var edit = document.getElementById('edit');
var cancel = document.getElementById('cancel');
var input = document.getElementById('firstname');
var label = document.getElementsByClassName('ansProfile')[0];
if(which==='edit'){
if(edit.checked){
cancel.checked=false;
label.style.display='none';
input.style.display='inline';
}else{
label.style.display='inline';
}
}else{
if(cancel.checked){
edit.checked=false;
label.style.display='inline';
input.style.display='none';
}else{
input.style.display='inline';
}
}
}
<label class="lblProfile">First Name: </label>
<label class="ansProfile">${resident.firstname}</label>
<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>
<input id='edit' type='checkbox' onClick='showhide("edit")'/> Edit
<input id='cancel' type='checkbox' onClick='showhide("cancel")'/> Cancel
推荐阅读
- elasticsearch - 删除所有搜索响应文档
- c# - Mono 3.12.1 运行 .Net 2.0 应用程序:System.TypeLoadException:无法加载类型
- date - javascript getMonth 在远程服务器上不起作用
- linux - impossible to run xvfb screen at more than 8bit depth
- asp.net-mvc - 每次用户通过net core 2.0中的授权处理程序时如何检查用户属性
- redis - BinaryJedisCluster 的 Jedis 池
- apache-kafka - Kafka集群失败处理说明
- python - Single View with Dynamic template
- sockets - NestJS 多个 WebSocketGateway
- java - How to serialize a list with Jackson without the list name?