JavaScript代码不更改动态生成的html代码的样式

所以我编写了javascript代码来动态生成html代码，以便在我的网站页面上显示图像。在这段动态代码中，我为每个图像提供了一个按钮标签，这样当我的用户登录时，它将显示此按钮（这是一个x按钮，用户可以删除它），当我注销时，我希望这些按钮离开，即使用if语句检查是否有经过身份验证的用户在场，显示，如果没有，则将显示设置为无。但是，如果没有用户，我的javascript将样式更改为none，这是不适用的。我有两个硬编码按钮（上传图片和注销按钮，它们工作正常）的相同功能。它只是处理动态生成的代码

我已尝试添加默认的'style='display:none；'在动态html中，我也尝试过在css文档中使用相同的样式行，但两者都不起作用。默认情况下，先将显示设置为“无”，然后在登录后将样式更改为“显示：块”

Javascript检查用户是否登录，然后相应地更改样式：

const loggedIn = document.querySelectorAll('.logged-in');
const loggedInX = document.querySelectorAll('.logged-inX');

const setupUI = (user) => {
    if(user){
        //toggle UI elements
        loggedIn.forEach(item => item.style.display = 'block');
        loggedInX.forEach(item => item.style.display = 'block');

    }
    else{
        loggedIn.forEach(item => item.style.display = 'none');
        loggedInX.forEach(item => item.style.display = 'none');


    }
}

Javascript从数据库加载图像并生成代码：

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;
        snapshot.forEach(function(data){
            var url = data.val().url;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().year;

            content += '<div class="col-xl-4 col-xs-12 imageGrid">';
            content += '<a class="example-image-link" href="'+url+'" data-lightbox="example-1 '+counter+'"><img class="example-image" width="300" height="200" src="'+url+'" alt="image-1"/></a>';
            content += '<button class="imageButton logged-inX">x</button>';
            content += '</div>';
            counter++;
        });
        $('.displayImagesFromFirebase').append(content);
    }
});

var-database=firebase.database（）.ref（）.child（'Posts/'）；
数据库.once（'value'，函数（快照）{
if（snapshot.exists（））{
var内容=“”；
var计数器=0；
snapshot.forEach（函数（数据）{
var url=data.val（）.url；
变量维度=data.val（）.dimensions；
var title=data.val（）.title；
var year=data.val（）.year；
var medium=data.val（）.year；
内容+=''；
内容+=''；
内容+='x'；
内容+=''；
计数器++；
});
$（'.displayImagesFromFirebase'）。追加（内容）；
}
});

---

So tl；dr，我希望动态生成的html代码中的这些按钮在有用户时显示，在没有经过身份验证的用户时不显示。此代码适用于页面中的硬编码html，但不适用于此函数动态生成的代码。

因为只有在页面第一次显示时才调用

setupUI

，这是它显示/隐藏元素的唯一时间。在此之后生成的任何元素都不受

setupUI

中的代码的影响

最简单的解决方案是将

querySelectorAll

调用移动到

setupUI

中，然后在修改HTML时重新执行

setupUI

：

const setupUI = (user) => {
    const loggedIn = document.querySelectorAll('.logged-in');
    const loggedInX = document.querySelectorAll('.logged-inX');

    if(user){
        //toggle UI elements
        loggedIn.forEach(item => item.style.display = 'block');
        loggedInX.forEach(item => item.style.display = 'block');    
    }
    else{
        loggedIn.forEach(item => item.style.display = 'none');
        loggedInX.forEach(item => item.style.display = 'none');    
    }
}

然后：

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;
        snapshot.forEach(function(data){
            var url = data.val().url;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().year;

            content += '<div class="col-xl-4 col-xs-12 imageGrid">';
            content += '<a class="example-image-link" href="'+url+'" data-lightbox="example-1 '+counter+'"><img class="example-image" width="300" height="200" src="'+url+'" alt="image-1"/></a>';
            content += '<button class="imageButton logged-inX">x</button>';
            content += '</div>';
            counter++;
        });
        $('.displayImagesFromFirebase').append(content);
        setupUI(firebase.auth().currentUser);
    }
});

var-database=firebase.database（）.ref（）.child（'Posts/'）；
数据库.once（'value'，函数（快照）{
if（snapshot.exists（））{
var内容=“”；
var计数器=0；
snapshot.forEach（函数（数据）{
var url=data.val（）.url；
变量维度=data.val（）.dimensions；
var title=data.val（）.title；
var year=data.val（）.year；
var medium=data.val（）.year；
内容+=''；
内容+=''；
内容+='x'；
内容+=''；
计数器++；
});
$（'.displayImagesFromFirebase'）。追加（内容）；
setupUI（firebase.auth（）.currentUser）；
}
});

您是否在快照中遇到断点。forEach？@naveen我没有。代码完全在我的页面上生成，如果我检查页面，所有正确的代码都在那里。图像显示完美，按钮就在那里。只是我的第一段代码中的javascript对按钮标记的样式没有任何影响。如果这是有意义的。这是一个精确的解决方案，页面可以完美地加载并按需要运行。感谢您的解决方案！