變量不在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 var1 = 'string', 
    var2 = 'int'; 

不要JS裏面混PHP - 這是凌亂。創建一個隱藏的跨度併爲其分配數據標籤，並像這樣調用

其次，這是因爲無論何時調用該函數都會重置該值。放置在外面，或傳遞一個名爲count的參數，以便使其更通用並在整個項目中使用它。

Answer 3

您的問題在於，變量count是您的方法的本地。這意味着它只在該方法調用中存在。下一次再次調用函數時，它將創建一個值爲2的不同的count，因爲這是您在聲明中指定的值。在方法外移動變量聲明，一切都應該沒問題。