Javascript：切换输入标签开启和关闭仅适用于表单中最后一个标签

我试图在各自输入点击时打开和关闭标签。但是，我的代码只是关闭表单中的最后一个标签。我知道jQuery将是最好的解决方案，但我试图去掌握Javascript。我将不胜感激任何帮助。非常感谢！ :)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>

来源

2011-02-16 Gary Ryan

您的代码这个简单的变化会做的伎俩：

// 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); 

     }    
    }

来源

2011-02-16 21:13:18 Iogui

你犯了循环中创建函数的典型错误。 JavaScript只有函数作用域，而不是块作用域。因此做

for(...) { 
    var value = "something"; 
}

是一样

var value; 
for(...) { 
    value = "something"; 
}

这表示所有的匿名函数指的是相同oInput和oLabel。那些将具有循环的最后一次迭代的值。

您必须引入一个新的范围，例如，与立即功能：

for(var i=0; i < oForm.length; i++){ 
    if(oForm.elements[i].type == 'text'){    
     addEvent(oInput,'click','onclick',(function(oInput, oLabel) { 
      return function(){toggle(oInput,oLabel)},false); 
     }(oForm.elements[i], oInput.previousSibling))); 
    }    
}

但更易读是创建一个专门的功能：

function getHandler(oInput, oLabel) { 
    return function(){toggle(oInput,oLabel)},false); 
} 

// later 

for(var i=0; i < oForm.length; i++){ 
    if(oForm.elements[i].type == 'text'){    
     addEvent(oInput,'click','onclick',getHandler(oForm.elements[i], oInput.previousSibling));   
}

来源

2011-02-16 21:01:18

三江源，我知道这是一些非常基本的，我只是WASN”得到。大拇指！ – 2011-02-16 21:10:11

@加里瑞安：请考虑[@ logui的答案]（http://stackoverflow.com/questions/5021843/javascript-toggling-an-input-label-on-and-off-only-works-on-the-last -label-在个/ 5022170＃5022170）。它更容易，不涉及关闭。 – 2011-02-16 21:27:34

:)关于关闭的前2个答案解释你做错了什么。

我改变了你切换方法，因为它的输入（而不是您正试图通过在2种元素）接受的元素。

我然后改变了你的拨动方法来检索所有在传递到方法（使用的getElementsByTagName法）的元素的父节点的标签元件。然后我检索传入的元素的ID并将其与每个检索到的标签元素进行比较。如果元素的ID与标签的For属性匹配，我将标签的样式设置为“display：none”...否则，我将标签的样式设置为“display：inline”。

噢，我改变了一个最后一件事......我给你输入“IDS” :)

<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(element){ 
      var labels= element.parentNode.getElementsByTagName("label"); 
      var elementName = String(element.id); 

      for(i=0; i<labels.length; i++) 
      { 
       var labelFor = String(labels[i].htmlFor); 

       if(labelFor == elementName) 
       { hideLabel(labels[i]) 
       }else{ 
        displayLabel(labels[i]); 
       } 
      } 
     } 

     function displayLabel(label){ 
      if(label != undefined){ 
      label.style.display = 'inline'; 
      } 
     } 
     function hideLabel(label){ 
      if(label != undefined){ 
      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(this)},false); 

      }    
     } 
    } 

    new ToggleLabels(0); 
} 


</script> 
</head> 
<body> 
<form> 
    <label for="name">Name: </label><input id="name" type="text" name="name"/> 
    <label for="age">Age: </label><input type="text" id="age" name="age"/> 
    <label for="gender">Gender: </label><input type="text" id="gender" name="gender"/> 
</form> 
</body> 
</html>

-Frinny

来源

2011-02-16 21:24:26 Frinavale

Javascript：切换输入标签开启和关闭仅适用于表单中最后一个标签

回答

相关问题