将多个参数传递到单个参数中

pass multiple arguments into a single parameter

本文关键字：单个 参数 参数传递      更新时间：2023-09-26

我在网上找到了一个脚本，可以显示和隐藏代码片段:

 function show(shown, hidden,) {
    document.getElementById(shown).style.display='block';
    document.getElementById(hidden).style.display='none';
    return false;
 }

<a href="#" onclick="return show('Page1','Page2');">Page 1</a>
<a href="#" onclick="return show('Page2','Page1');">Page 2</a>

我的问题是，我如何改变它，以包括更多的页面?

我能找到的唯一可行的方法是:

    function show(shown, hidden1, hidden2, hidden3) {
      document.getElementById(shown).style.display='block';
      document.getElementById(hidden1).style.display='none';
      document.getElementById(hidden2).style.display='none';
      document.getElementById(hidden3).style.display='none';
      return false;
    }

<a href="" onclick="return show('Page1','Page2','Page3','Page4' );">Page 1</a>
<a href="" onclick="return show('Page2','Page1','Page3','Page4' );">Page 2</a>
<a href="" onclick="return show('Page3','Page1','Page2','Page4' );">Page 3</a>
<a href="" onclick="return show('Page4','Page1','Page2','Page3' );">Page 4</a>

…但是看起来有点乱。那么是否有一种方法可以一次性将3页传递到脚本中的"隐藏"参数中?

谢谢!

可以传递一个数组作为hidden参数。然后你必须像这样修改你的JS:

function show(shown, hidden ) {
    document.getElementById(shown).style.display='block';
    for( var i=hidden.length; i--; ) {
      document.getElementById(hidden[i]).style.display='none';
    }
    return false;
 }

和HTML看起来像这样:

<a href="" onclick="return show('Page1', ['Page2','Page3','Page4'] );">Page 1</a>

作为一种选择，你可以使用类而不是设置样式。然后，您可以将hidden参数放在一起:

function show( shown ) {
    // remove class 'shownPage' everywhere
    var els = document.querySelectorAll( '.shownPage' );
    for( var i=els.length; i--; ) {
      els.classList.remove( 'shownPage' );
    }
    // and just add it to the page to show
    document.getElementById(shown).classList.add( 'shownPage' );
    return false;
 }

你可以传递一个数组作为第二个参数，或者甚至使用已经存在的arguments数组，如object:

function show() {
    document.getElementById(arguments[0]).style.display='block';
    for(var i=1; i<arguments.length; i++){
        document.getElementById(arguments[i]).style.display='none';
    }
}

在这段代码中，第一个参数是显示所有其他参数的id。

您可以使用arguments，传递由Sirko建议的数组，对象或使用选择您选择的所有节点(例如类)的方法，然后只显示您想要的一个

// arguments
function show() {
    var i = arguments.length;
    if (i > 0) {
        while (--i) document.getElementById(arguments[i]).style.display = 'none';
        document.getElementById(arguments[0]).style.display = 'block';
    }
}
// show('vis_id_1', 'hid_id_1', 'hid_id_2',...)
// object
function show(obj) {
    var id;
    for (id in obj) {
        if (obj.hasOwnProperty(id)) { // safety filter
            document.getElementById(id).style.display = obj[id];
        }
    }
}
// show({'vis_id_1':'block', 'hid_id_1':'none'});
相关文章：