Question

我想将同一事件中的两个元素传递给一个函数，以便在单击链接按钮时显示这两个元素。

这是函数

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

这是我要显示的两个元素。仅显示第一个。我该如何显示两者同时点击按钮。

<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()

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>

return false是为了阻止浏览器在点击链接时执行的标准事件。

Answer 4

传递数组，以便我们可以将“on”作为第二个参数

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;
}

多个：

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

单品：

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

或者，将 on 作为第一个参数传递，并且如其他地方所建议的那样，从第1项循环遍历arguments object对象

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>

最后（进入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>

Answer 5

尝试这样的事情：

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>

将两个元素传递给函数

5 个答案: