无法选择Javascript追加的HTML元素[重复]

Question

这个问题在这里已有答案：

• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference 6个答案

我知道这是一个非常普遍的问题，即使我已经多次解决了这些问题，也有很多这样的问题已经得到解决，但这次我还是停留在这一点上。我试图应用很多解决方案，但没有任何对我有用。

这就是我的JS的样子：

jQuery(document).ready(function($){
    avHomePageThumbnails();
    var slideIndex = 0; showSlides();


    function avHomePageThumbnails(){
        let homePagePosts = JSON.parse(posts_data);
        homePagePosts.map( homePagePost => {
            let screenID = homePagePost.query_vars.meta_value;
            if(homePagePost.posts.length > 0){
                homePagePost.posts.map(( post, i ) => {
                    let postID = post.ID;
                    let postURl = post.guid;
                    $.post(ajax_url, {
                    action: "av_get_post_data_by_id",
                    id: postID
                    }, function(resp){
                        //console.log(resp, screenID);
                        resp = JSON.parse(resp);
                        let data = ''+
                        '<div class="mySlides fade">'+
                            '<a href="'+postURl+'">'+
                                '<img src="'+resp.image+'" style="width:100%">'+
                                '<div class="text">'+resp.title+'</div>'+
                            '</a>'+
                        '</div>';
                        $(".home-screen-thumb-container #"+screenID).append(data);

                    });
                } );
            }
        });
        //console.log(homePagePosts);
    }


function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    //var slides = $(".home-screen-thumb-container").find(".mySlides");
    console.log(slides);
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display="none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}  

    slides[slideIndex-1].style.display = "block";  
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
});

在这里，我无法在mySlides中选择div showSlides()

Answer 1

在您调用showSlides()时，您的其他函数avHomePageThumbnails()尚未完成其（异步）ajax调用。

你的解决方案是从你的ajax-call（showSlides()）调用$.post()它的回调函数（在那个添加div的部分之后）。或者（更好），让avHomePageThumbnails()返回一个承诺，并在承诺完成后调用showSlides()。

快速介绍承诺：https://developers.google.com/web/fundamentals/primers/promises

Answer 2

必须在附加数据之后调用ShowSlides（），因为该元素不存在。调用时未设置查询结果。它是异步的！