使一个元素可见而其他49个元素不可见

Question

I am absolutely new to javascript, so please bear with me.

I have 50 elements on my page with ids. All are set to visibility:hidden and position:fixed. I have a button that corresponds to each element. When a button is clicked, a javascript function is initiated which makes the corresponding element visibile and position:relative. Code looks something like this:

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

To ensure that only one element is ever visible and relative, I also need to make the other 49 elements hidden and fixed. How can I accomplish this without having to resort to the following sort of code:

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

Any help would be appreciated, because with 50 elements, the number of lines of coding would be outrageous.

Answer 1

Should be able to handle it with a single loop, just pass in the number of the item you wish to show:

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

给您的复选框类名“ someclass”，并通过函数documet.getElementsByClassName选择所有元素

Answer 3

You can write a function like this:

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

Then you can use makeVisible('#id1'); to make the id1 element visible