2つの要素を関数に渡す

Question

同じイベントの2つの要素を関数に渡して、リンクボタンをクリックしたときに両方の要素を表示したいとします。

これは機能

function showMenu(elmnt) 
     { 
      document.getElementById(elmnt).style.visibility="visible"; 
     } 

これらは私が表示したい2つの要素です。最初のものだけが表示されます。ボタンをクリックすると、両方を同時に表示するにはどうすればいいですか？

<div id="navigation"> 
     <ul> 
      <li><a href="#" onClick="showMenu('scroll')" onClick="showMenu('oath')" >Oath</a></li> 
      <li><a href="#">Apply</a></li> 
     </ul> 
    </div> 

Answer 1

function showMenu(elmnt1, elmnt2) { 
    document.getElementById(elmnt1).style.visibility="visible"; 
    document.getElementById(elmnt2).style.visibility="visible"; 
} 

onClick="showMenu('scroll', 'oath')" 

か：

function showMenu(elements) { 
    for (var i = 0; i < elements.length; i++) { 
     document.getElementById(elements[i]).style.visibility="visible"; 
    } 
} 

onClick="showMenu(['scroll', 'oath'])" 

すべてはJavascriptなどを使用してイベントハンドラを取り付けることによって、より一層エレガントに行うことができるこれ、あなたはunobtrusive Javascriptになっているはずです。

Answer 2

はあなただけonClick="showMenu('scroll', 'oath');return false;"を使用して、機能を持っていませんでした：

function showMenu(el1, el2) 
    { 
     document.getElementById(el1).style.visibility="visible"; 
     document.getElementById(el2).style.visibility="visible"; 
    } 

イベントを取り付ける好ましい方法はaddEventListenerを使用して代わりの属性れます。 attachEventを使用してIEサポートを追加する必要があります。 MDN - addEventListener()。 return false

Answer 3

function showMenu(elmnt1, elmnt2) 
{ 
    document.getElementById(elmnt1).style.visibility="visible"; 
    document.getElementById(elmnt2).style.visibility="visible"; 
} 

<li><a href="#" onclick="showMenu('scroll', 'oath'); return false;">Oath</a></li> 

は、リンクの上に当たったときにブラウザが実行することになり、標準的なイベントを停止することです。

Answer 4

はこのような何かを試してみてください。

<a href="#" onclick="return showHide(['scroll','oath'],1)">Show</a> 
<a href="#" onclick="return showHide(['scroll','oath'],0)">Hide</a> 

単一の項目：

function showMenu(elmnt1, elmnt2) 

{ 

document.getElementById(elmnt1).style.visibility="visible"; 
      document.getElementById(elmnt2).style.visibility="visible"; 

} 

<li><a href="#" onClick="showMenu('scroll', 'oath')">Oath</a></li> 

Answer 5

が

function showHide(elmnt,on) { 
    if (elmnt.length==null) elmnt=[elmnt]; 
    for (var i=0,n=elmnt.length;i<n;i++) { 
    var item = document.getElementById(elmnt[i]); 
    if (item) item.style.visibility=on?"visible":"hidden"; 
    } 
    return false; 
} 

複数の第2引数に "上" ので、我々は持つことができる配列を渡す

あるいは

---

、他の場所で示唆されるように項目から、1

function showHide() { 
    var on = arguments[0] 
    for (var i=1,n=arguments.length;i<n;i++) { // from 1 
    var item = document.getElementById(arguments[i]); 
    if (item) item.style.visibility=on?"visible":"hidden"; 
    } 
    return false; 
} 


<a href="#" onclick="return showHide(1,'scroll','oath')">Show</a> 
<a href="#" onclick="return showHide(0,'scroll','oath')">Hide</a> 

---

をarguments objectオブジェクト上のループを最初の引数としてにを通過し、最後に（ここでjQueryの領域に入る）が通過選択オン/オフを許可するオブジェクト

function showHide(obj) { 
    for (var o in obj) { 
    var item = document.getElementById(o); 
    if (item) item.style.visibility=obj[o]?"visible":"hidden"; 
    } 
    return false; 
} 


<a href="#" onclick="return showHide({'scroll':1,'oath':0})">Show scroll, hide oath</a> 
<a href="#" onclick="return showHide({'scroll':0,'oath':1})">Hide scroll, Show oath</a>