Question

我是javascript的新手，所以请耐心等待。

我的页面上有50个带有ID的元素。所有都设置为可见性：隐藏和位置：固定。我有一个对应每个元素的按钮。单击一个按钮时，将启动一个javascript函数，使相应的元素可见，并且position：relative。代码看起来像这样：

document.getElementById("id1").style.position='relative';
document.getElementById("id1").style.visibility='visible';

为确保只有一个元素可见且相对，我还需要隐藏和修复其他49个元素。如何在不必使用以下代码的情况下实现此目的：

function makeid1visibile()
{
    document.getElementById("id1").style.position='relative';
    document.getElementById("id1").style.visibility='visible';

    document.getElementById("id2").style.position='fixed';
    document.getElementById("id2").style.visibility='hidden';
    document.getElementById("id3").style.position='fixed';
    document.getElementById("id3").style.visibility='hidden';
    document.getElementById("id4").style.position='fixed';
    document.getElementById("id4").style.visibility='hidden';
    // etc...
}

任何帮助都将受到赞赏，因为有50个元素，编码行数将是令人发指的。

Answer 1

应该能够通过一个循环来处理它，只需传入你想要显示的项目的数量：

function makeIdVisible(id) {
    document.getElementById("id" + id).style.position='relative';
    document.getElementById("id" + id).style.visibility='visible';

    for (var i = 1; i <= 50; i++) {
        if (i !== id) {
            document.getElementById("id" + i).style.position='fixed';
            document.getElementById("id" + i).style.visibility='hidden';
        }
    }
}

Answer 2

给你们复选框classname“someclass”并按功能选择所有元素documet.getElementsByClassName

Answer 3

您可以编写如下函数：

function makeVisible( id ){
    var idList = ['id1','id2','id3','id4'];
    for( var i = 0, l = idList.length; i<l ; i++ ){
        document.getElementById(idList[i]).style.position='fixed';
        document.getElementById(idList[i]).style.visibility='hidden';
    }
    document.getElementById(id).style.position='relative';
    document.getElementById(id).style.visibility='visible';
}

然后你可以使用 makeVisible（ '＃ID1'）; 使id1元素可见

使一个元素可见，另外49个不可见

3 个答案: