javascript - How can I select all elements with the same class name? - Stack Overflow

admin管理员组

文章数量:1287988

I have a Boolean variable. It is stored in a hidden input field. Basically, if the user is signed in, it is false, if not, it is true.

There are download buttons which will link to a file download. My aim is to make it so that, if they aren't signed in, the button will not show, and the link will not work (it would be nice to have an alert saying they need to sign in or something, but that would probably be more effort than it's worth).

I have a function that performs onload of body:

function hide_download_btns(){
if (document.getElementById('download_btn_var_input').value == "true") {
    document.getElementsByClassName('project_download_btn').item(0).hidden = true
    }
}

My problem is where it asks for the nth term .item(0). This is where it selects the div on which to perform the function, however, I want the function to affect all divs with the class name 'project_download_btn'.

I'm not a fan of jQuery, so it would be great to avoid that if possible.

I have a Boolean variable. It is stored in a hidden input field. Basically, if the user is signed in, it is false, if not, it is true.

There are download buttons which will link to a file download. My aim is to make it so that, if they aren't signed in, the button will not show, and the link will not work (it would be nice to have an alert saying they need to sign in or something, but that would probably be more effort than it's worth).

I have a function that performs onload of body:

function hide_download_btns(){
if (document.getElementById('download_btn_var_input').value == "true") {
    document.getElementsByClassName('project_download_btn').item(0).hidden = true
    }
}

My problem is where it asks for the nth term .item(0). This is where it selects the div on which to perform the function, however, I want the function to affect all divs with the class name 'project_download_btn'.

I'm not a fan of jQuery, so it would be great to avoid that if possible.

• javascript
• jquery

Share Improve this question Follow edited Feb 20, 2015 at 20:05 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Jun 7, 2013 at 13:53 Josh-MasonJosh-Mason 31933 gold badges88 silver badges2323 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can simply loop through the elements instead of just taking the 0th.

var buttons = document.getElementsByClassName('project_download_btn');

for(var i=0; i< buttons.length; i++){
    buttons[i].hidden = true;
}

if (document.getElementById('download_btn_var_input').value == "true") {
    var el = document.getElementsByClassName('project_download_btn');
    for (var i = 0; i < el.length; i++) {
        el[i].hidden = true;
    }
}

document.getElementsByClassName returns array so what you are interested is :

document.getElementsByClassName('project_download_btn')[0]

Loop through each div that contains your download button and set hidden to true:

if (document.getElementById('download_btn_var_input').value == "true") {
    var button_divs_array = document.getElementsByClassName('project_download_btn');
    for (var i = 0; i < button_divs_array.length; i++) {
        button_divs_array[i].hidden = true;
    }
}

本文标签： javascriptHow can I select all elements with the same class nameStack Overflow