Question

当我没有任何东西可以加载时，我试图隐藏按钮。一切都工作正常，点击它之后ajax加载精细附加dom罚款。

加载最后一页后才有意思。按钮仍然位于页面上，因为没有什么可以加载。当我点击它，然后它隐藏。

我想让它在没有任何东西可以加载时自动隐藏。请建议。谢谢

<style>
    .load_more{background: url(/skin/frontend/enterprise/ubt_new/images/drop_down.png) no-repeat;padding-left: 20px;padding-right: 75px;padding-bottom: 15px;}
</style>


<div class="resultsblock" style="float: left;width: 728px;margin-bottom: 30px;">
<div class="results"></div>
<div class="clear:left;"></div>
<button class="load_more" style="margin-left: 305px;margin-top: -4px;display: none;" id="load_more_button"></button>
<div class="animation_image" style="display:block;"><img src=""> Loading...</div>
</div>

<script>

jQuery(document).ready(function() {  

    var track_click = 1; //track user click on "load more" button, righ now it is 0 click

    var total_pages = <?php echo $this->totalPages(); ?>;
    console.log(total_pages);

    jQuery('.results').load("http://www.ubt.com/index.php/featured/course/index", {'p':track_click}, function() {track_click++;
    jQuery('.animation_image').hide();
    jQuery(".load_more").show();
    console.log(track_click);


}); //initial data to load


    jQuery(".load_more").click(function (e) { //user clicks on button

  jQuery(this).hide(); //hide load more button on click

        if(track_click <= total_pages) //user click number is still less than total pages
        {

        jQuery('.animation_image').show(); //show loading image
            console.log(track_click);
            //post page number and load returned data into result element
            jQuery.post('http://www.ubt.com/index.php/featured/course/index',
                        {'p': track_click}, function(data) {

                jQuery(".load_more").show(); //bring back load more button

                jQuery(".results").append(data); //append data received from server

                //scroll page smoothly to button id
                jQuery("html, body").animate({scrollTop: jQuery("#load_more_button").offset().top}, 500);

                //hide loading image
                jQuery('.animation_image').hide(); //hide loading image once data is received

                track_click++; //user click increment on load button
             console.log(track_click);

            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
                alert(thrownError); //alert with HTTP error
                jQuery(".load_more").show(); //bring back load more button
                jQuery('.animation_image').hide(); //hide loading image once data is received
            });

// I believe here relies the problem, even when the track click is more than the condition
// It's skipping this check and not hiding it.
// It hides after recieveing the last click which is not requied as there is nothing to load



            if(track_click >= total_pages-1) //compare user click with page number
            {
                console.log(total_pages-1);
                //reached end of the page yet? disable load button
                jQuery(".load_more").hide();

            }
         }

        });


});

// finsihing for the ajax to finish and run stuff on that ajax loaded stuff
// It has nothing  to do with the button, just copying in case

jQuery(document).ajaxComplete(function(){
    if(jQuery('.prod').length != 0) {
        jQuery(".prod").hover(function(){
        jQuery(this).find(".prod_title").hide();
        jQuery(this).find(".prod_desc").fadeIn();
    },function(){        
    jQuery(this).find(".prod_desc").fadeOut(); 

    jQuery(this).find(".prod_title_wrap").show();
    jQuery(this).find(".prod_title").show();
    });
}

});



</script>

Answer 1

你的track_click增量是post，所以它是异步的，而你的比较是在post触发后（不执行）发生的，所以你没有机会在合适的时间进行测试。在后期结果处理中移动您的比较...

为什么我在ajax加载后加载更多按钮需要在它隐藏之前再次点击它，即使没有任何东西可以加载

1 个答案: