gpt4 book ai didi

Javascript:打开和关闭输入标签仅适用于表单中的最后一个标签

转载 作者:行者123 更新时间:2023-11-28 21:26:02 25 4
gpt4 key购买 nike

我试图在单击标签各自的输入时打开和关闭标签。然而,我的代码只是关闭了表单中的最后一个标签。我知道 jQuery 将是最好的解决方案,但我正在尝试掌握 Javascript。我将非常感谢任何帮助。非常感谢! :)

<html>
<head>
<script type="text/javascript">
window.onload=foo;

function foo(){

function ToggleLabels(form){
var oForm = document.forms[form];

// this function will add events to objects.
function addEvent(object,eType,eWindowsType,func,bubble){
if(window.addEventListener){
object.addEventListener(eType,func,bubble);
}
if(window.attachEvent){
object.attachEvent(eWindowsType,func);
}
}

//toggles the display of the labels
function toggle(input,label){
alert(label.innerHTML)
if(input.value == ''){
if(label.style.display == 'none'){
label.style.display = 'inline';
}
else{
label.style.display = 'none';
}
}
else{
label.style.display = 'none';
}
}

// Loop through all text inputs in the form and add the toggle functionality
for(var i=0; i < oForm.length; i++){
if(oForm.elements[i].type == 'text'){
var oInput = oForm.elements[i];
var oLabel = oInput.previousSibling;
addEvent(oInput,'click','onclick',function(){toggle(oInput,oLabel)},false);

}
}
}

new ToggleLabels(0);
}
</script>
</head>
<body>
<form>
<label for="name" id="nameL">Name: </label><input id="name" type="text" name="name"/>
<label for="age">Age: </label><input type="text" name="age"/>
<label for="gender">Gender: </label><input type="text" name="gender"/>
</form>
</body>
</html>

最佳答案

对代码进行简单的更改即可达到目的:

// Loop through all text inputs in the form and add the toggle functionality
for(var i=0; i < oForm.length; i++){
if(oForm.elements[i].type == 'text'){
var oInput = oForm.elements[i];
addEvent(oInput,'click','onclick',function(){toggle(this,this.previousSibling)},false);

}
}

关于Javascript:打开和关闭输入标签仅适用于表单中的最后一个标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5021843/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com