Как выбрать все элементы с тем же именем класса?

Question

У меня есть булева переменная. Он хранится в скрытом поле ввода. В принципе, если пользователь зарегистрирован, это false, если нет, то это true.

Есть кнопки загрузки, которые будут ссылаться на загрузку файла. Моя цель состоит в том, чтобы сделать так, чтобы, если они не вошли в систему, кнопка не будет отображаться, и ссылка не будет работать (было бы неплохо иметь предупреждение о необходимости входа в систему или что-то в этом роде, но это вероятно, будет больше усилий, чем это стоит).

У меня есть функция, которая выполняет onload тела:

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

Моя проблема в том, где он просит п-го члена .item(0). Здесь он выбирает div для выполнения функции, однако я хочу, чтобы функция влияла на всеdiv s с именем класса 'project_download_btn'.

Я не являюсь поклонником jQuery, поэтому было бы здорово избежать этого, если это возможно.

Answer 1

Вы можете просто пропустить элементы, а не просто принимать 0-й.

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

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

Answer 2

document.getElementsByClassName возвращает массив так, что вы заинтересованы в:

document.getElementsByClassName('project_download_btn')[0] 

Answer 3

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

Answer 4

Петля через каждый div, который содержит вашу кнопку скачать и установить hidden в 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; 
    } 
}