如何选择具有相同类名的所有元素

How can I select all elements with the same class name?

本文关键字：同类 元素 何选择 选择      更新时间：2023-09-26

我有一个布尔变量。它存储在一个隐藏的输入字段中。基本上，如果用户已登录，则为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
    }
}

我的问题是它要求第n项.item(0)。这是它选择在其上执行函数的div的地方，但是，我希望函数影响所有 div的类名'project_download_btn'。

我不是jQuery的粉丝，所以如果可能的话最好避免使用它。

可以简单地遍历元素，而不是只取第0个。

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返回数组，所以您感兴趣的是:

document.getElementsByClassName('project_download_btn')[0]

遍行包含下载按钮的每个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;
    }
}
相关文章：