0

選択に基づいて2つの要素（ラベルとJavascript getElementsByNameを使用した入力）を表示/非表示にしようとしています。ラベルと入力を変更すると、getElementByIDで機能しますが、何らかの理由でNameが機能しません。コードは次のとおりです。

<script language="JavaScript" type="text/javascript">
<!--

function Toggle(obj){
 var val=obj.value;
 if (!obj.m){ obj.m=''; }
 if (!obj.m.match(val)){ obj.m+=','+val+','; }
 var hide=obj.m.split(',');
 for (var zxc0=0;zxc0<hide.length;zxc0++){
  if (document.getElementsByName(hide[zxc0])){
   document.getElementsByName(hide[zxc0]).style.display='none';
  }
 }
 var show=val.split(',');
 for (var zxc1=0;zxc1<show.length;zxc1++){
  if (document.getElementsByName(show[zxc1])){
   document.getElementsByName(show[zxc1]).style.display='';
  }
 }
}

//-->
</script>

フォーム要素の場合は次のとおりです。

            <div id="styled-select">
            <select name="how" onchange="Toggle(this);" class="dropdown">
                    <option value="Internet Search">Internet Search</option>
                    <option value="Facebook" >Facebook</option>
                    <option value="Twitter" >Twitter</option>
                    <option value="LinkedIN" >LinkedIN</option>
                    <option value="Referral">Referral</option>
                    <option value="Other">Other</option>
            </select>
            </div>                
            <label name="Referral" style="display:none;">Referred By:</label>
            <input name="Referral" style="display:none;" value="" class="hidden-txt">

ユーザーが「紹介」を選択すると、「紹介」という名前のラベルと入力が表示されます。getElementByIDを使用し、オプションに2つの値をコンマで区切って指定し、ラベルと入力に別々のIDを使用した場合、これは機能していました。

ご協力ありがとうございました。

4

1 に答える 1

0 
var elems = document.getElementsByName(hide[zxc0]);
if(elems) {
    for(var i = 0;i < elems.length;i++) {
       elems[i].style.display='none';
       //Do whatever else you need to do with the element.
    }
}

Kevin Boucherが述べたように、getElementsByNameは配列を返します。その名前のすべての要素にdisplay=noneスタイルを適用したい場合、上記のコードはそれを実現します。また、パフォーマンスのために、上記のコードはdocument.getElementsByName（）を1回だけ呼び出しますが、それを超えると3回以上は有益であると確信しています。

要素の選択が簡単なため、JQueryを調査する価値があるかもしれません。

于 2012-10-25T02:18:44.637 に答える