javascript - 无法选择 Javascript 附加的 HTML 元素

Question

我知道这是一个非常常见的问题，即使我已经解决了很多次这样的问题，但有很多这样的问题已经得到解答，但是这次我陷入了这一点。我尝试应用许多解决方案，但没有任何效果。

这就是我的 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
}
});

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

Answer 1

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

您的解决方案是从 ajax 调用 ($.post()) 中调用 showSlides() 其回调函数(在添加 div 的部分之后) 。或者(更好)，让 avHomePageThumbnails() 返回一个 Promise，并在 Promise 完成后调用 showSlides()。

此处对 Promise 的快速介绍: https://developers.google.com/web/fundamentals/primers/promises