Question

我试图创建jQuery脚本，从JSON文件加载daa，然后在div上添加JSON数据，添加div后（这有效）我试图隐藏它，使用选民但没有任何回报..

jQuery(document).ready(function($){

    //get reference for timeline div, to which will append data
    var timeline = $('#cd-timeline');


    //get JSON data
    $.getJSON('js/qw.json', function(data){
    //console.log(data.items);

            //for each item in json file, will append section with timeline data
            $.each(data.items, function(key,val){ 


                var timelineItem = '<div class="cd-timeline-block">'
                                    + ' <div class="cd-timeline-img cd-picture">'
                                    + '     <img src="img/cd-icon-picture.svg" alt="Picture">'
                                    + ' </div> <!-- cd-timeline-img -->'
                                    + ' <div class="cd-timeline-content">'
                                    + '     <h2>'+val.name+'</h2>'
                                    + '     <p>'+val.description+'</p>'
                                    + '     <p>SKU: '+val.sku+'</p>'
                                    + '     <a href="'+val.url+'" target="_blank" class="cd-read-more">View item</a>'
                                    + '     <span class="cd-date">'+val.date+'</span>'
                                    + ' </div> <!-- cd-timeline-content -->'
                                    + '</div> <!-- cd-timeline-block -->';

                //timeline.append(timelineItem);
                timeline.addChild(timelineItem);

            })
    }); 



    var timelineBlocks = $('.cd-timeline-block');
    var offset = 0.8;
    //hide timeline blocks which are outside the viewport
    hideBlocks(timelineBlocks, offset);


    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function(){
        (!window.requestAnimationFrame) 
            ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
            : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
    });

    function hideBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
        });
    }

    function showBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
        });
    }


});

不幸的是，函数hidBlocks无法正常工作，因为timelineBlocks为空。如何选择附加元素来创建列表，以便我可以为每个＆＃34;做每个＆＃34;循环？

麦克

Answer 1

在填充元素之前，可能会发生选择元素的代码。您需要将代码移动到$ .getJSON回调函数中：

$.getJSON('js/qw.json', function(data){
//console.log(data.items);

        //for each item in json file, will append section with timeline data
        $.each(data.items, function(key,val){ 


            var timelineItem = '<div class="cd-timeline-block">'
                                + ' <div class="cd-timeline-img cd-picture">'
                                + '     <img src="img/cd-icon-picture.svg" alt="Picture">'
                                + ' </div> <!-- cd-timeline-img -->'
                                + ' <div class="cd-timeline-content">'
                                + '     <h2>'+val.name+'</h2>'
                                + '     <p>'+val.description+'</p>'
                                + '     <p>SKU: '+val.sku+'</p>'
                                + '     <a href="'+val.url+'" target="_blank" class="cd-read-more">View item</a>'
                                + '     <span class="cd-date">'+val.date+'</span>'
                                + ' </div> <!-- cd-timeline-content -->'
                                + '</div> <!-- cd-timeline-block -->';

            //timeline.append(timelineItem);
            timeline.addChild(timelineItem);


        })
        var timelineBlocks = $('.cd-timeline-block');
        var offset = 0.8;
        //hide timeline blocks which are outside the viewport
        hideBlocks(timelineBlocks, offset);
});

追加失败后的jquery select元素

1 个答案: