javascript - 变量在 jQuery/JS 中不递增？

Question

由于某种原因，尽管我想在调用函数时增加变量，但我的变量一直重置为 2。真是气死我了，重构了好几次代码都无济于事!应该很简单...

这是我的代码:

( function( $ ) {
        $( document ).ready( function () {
            var count = 2;
            var total = <?php echo $loop->max_num_pages; ?>;
            if ( count <= total ) {
                $( window ).scroll( function() {
                    if ( $( window ).scrollTop() == $( document ).height() - $( window ).height() ) {
                        $.ajax({
                            url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
                            type:'POST',
                            data: "action=infinite_scroll&page_no=" + count + '&loop_file=forums', 
                            success: function( html ){
                                $( "#content" ).append( html );
                            }
                        });
                        count++;
                    }
                });
            } else {
                return;
            }
        });
    })( jQuery );

编辑:感谢您到目前为止的回复!更新代码如下:

<script type="text/javascript">
    pageCount = 2;
    total = <?php echo $loop->max_num_pages; ?>;
    jQuery( window ).scroll( function() {
        if  ( jQuery( window ).scrollTop() == jQuery( document ).height() - jQuery( window ).height() ){
            console.log( 'Old value: ' + pageCount );
            if ( pageCount > total ){
                return false;
            } else {
                loadArticle( pageCount );
            }
            pageCount++;
            console.log( 'New value: ' + pageCount );
        }
    }); 

    function loadArticle( pageNumber ) {
        jQuery.ajax({
            url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
            type:'POST',
            data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=forums', 
            success: function( html ){
                jQuery( "#content" ).append( html );
            }
        });
    return false;
    }
</script>

新值始终为 3，旧值始终为 2(在控制台中输出)，因此仍在重置...

已解决:ajax 方法中的 html 回调导致了这个问题。将增量移到那里工作!新代码:

( function( $ ) {
        pageCount = 2;
        total = <?php echo $loop->max_num_pages; ?>;
        $( window ).scroll( function() {
            if  ( $( window ).scrollTop() == $( document ).height() - $( window ).height() ){
                if ( pageCount > total ){
                    return false;
                } else {
                    $.ajax({
                        url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page_no=" + pageCount + '&loop_file=forums', 
                        success: function( html ){
                            $( "#content" ).append( html );
                            pageCount++;
                        }
                    });
                }
            }
        });
    })( jQuery );

Answer 1

首先要做两件事:

var 可以这样缩短:

var var1 = 'string',
    var2 = 'int';

不要在 JS 中混合 php - 它很乱。创建一个隐藏的跨度并为其分配数据标签并像那样调用

其次，这是因为每当您调用该函数时，该值都会被重置。放置在外部，或传递一个名为 count 的参数，以便您可以使其更通用并在整个项目中使用它。