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 count = 2;
( function( $ ) {
        $( document ).ready( function () {
            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 );

Answer 2

首先要做两件事：

var 可以这样缩短：

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

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

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

Answer 3

您的问题是 var count 是您方法的本地变量。这意味着它仅在该方法调用中处于活动状态。下次您再次调用您的函数时，它会创建一个不同的 count，其值为 2，因为这是您在声明中指定的值。将变量声明移到方法之外，一切都应该没问题。

jQuery/JS 中的变量不递增？

Variable not incrementing in jQuery / JS?

javascript

wordpress

jquery

infinite-scroll