javascript - 使一个元素可见，使其他 49 个元素不可见

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