Question

我创建了四个链接来改变某些元素的可见性。

Runthrough：

单击“One”会将id：“one”传递给makeVis（）函数，并且还会将id：“two”和“three”传递给makeInvis（）函数。

问题：

当我第一次点击一两或三个链接时，它正常工作。但是，如果我继续点击另一个链接，无论它是否相同，所有元素都将被隐藏。
第四个链接“一和三”似乎根本不起作用

任何人都可以帮我解决出错的问题，并告诉我一个可能的解决方案，我现在已经在网上漫步了3个小时。

<body>
<h1>JavaScript: Visibility</h1>
<div>
    <p>
        <a href="#" onclick="makeInvis(['two','three']); makeVis( 'one' );">One</a>
        <a href="#" onclick="makeInvis(['one','three']); makeVis( 'two' );">Two</a>
        <a href="#" onclick="makeInvis(['one','two']); makeVis( 'three' );">Three</a>   
        <a href="#" onclick="makeInvis( 'two' ); makeVis( ['one','three']);">One and Three</a>
    </p>
</div>    
<div class="owrapper">
    <div id="one" class="iwrapper">
        <p><strong>Element one</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
    <div id="two" class="iwrapper">
        <p><strong>Element two</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
    <div id="three" class="iwrapper">
        <p><strong>Element three</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
</div>
</body>

这是我的javascript代码

function makeVis( elementIDs )
{   
    if (!(elementIDs instanceof Array))
    {
         var element = elementIDs;
         element.style.visibility='visible';
    }
    else
        for (var n=0; n < elementIDs.length; n++)
        {
            var currentElement = document.getElementById(elementIDs[n]);
            currentElement.style.visibility='visible';

        }
}

function makeInvis( elementIDs )
{
    if (!(elementIDs instanceof Array))
    {
         var element = elementIDs;
         element.style.visibility='hidden';
    }
    else
        for (var n=0; n < elementIDs.length; n++)
        {
            var currentElement = document.getElementById(elementIDs[n]);
            currentElement.style.visibility='hidden';

        }
}

Answer 1

使用Array.isArray()（仅限现代浏览器，无IE7 AFAIK）或myVar instanceof Array。

Answer 2

您可以通过将所有输入强制转换为数组并处理数组来简化每个例程：

function makeVis( elementIDs )
{   
   elementIDs=String(elementIDs).split(",");

        for (var n=0, mx=elementIDs.length; n < mx; n++)
        {
            document.getElementById(elementIDs[n]).style.visibility='visible';

        }
}

Answer 3

这是因为你在一个非对象的东西上调用一个函数！纠正这个

     var element = elementIDs;

到

     var element = document.getElementById(elementIDs);

Answer 4

检查变量是否为数组的最佳方法：

var arr = [];

var obj = {};

Object.prototype.toString.call(arr) === '[object Array]' //true

Object.prototype.toString.call(obj) === '[object Array]' //false

有关详细信息，请参阅this answer。

Javascript：在函数内部，测试变量是否为数组

4 个答案: