分頁調用多個元素不工作，只調用它的最後一個

Question

我有一個分頁腳本，當多次調用，只會觸發最後一個被調用的元素。任何想法爲什麼會發生？

<script> 
$('.calendar-nagyhaz').scrollPagination(); 
$('.calendar-felso').scrollPagination(); 
</script> 

如果我試圖像這樣調用它，只有「.calendar-felso」會受到影響。分頁的腳本是這樣的：

(function($) { 

$.fn.scrollPagination = function(options) { 

    var settings = { 
     nop  : 1, // The number of posts per scroll to be loaded 
     offset : 0, // Initial offset, begins at 0 in this case 
     error : '', // When the user reaches the end this is the message that is 
            // displayed. You can change this if you want. 
     delay : 500, // When you scroll down the posts will load after a delayed amount of time. 
         // This is mainly for usability concerns. You can alter this as you see fit 
     scroll : false // The main bit, if set to false posts will not load as the user scrolls. 
         // but will still load if the user clicks. 
    } 

    // Extend the options so they work with the plugin 
    if(options) { 
     $.extend(settings, options); 
    } 

    // Some variables 
    $this = $(this); 
    $settings = settings; 
    var offset = $settings.offset; 
    var busy = false; // Checks if the scroll action is happening 
         // so we don't run it multiple times 

    function getData(add) { 

      if (add == true) {offAdd = offset+$settings.nop; } else { offAdd = offset-$settings.nop; } 
      offset = offAdd; 
      lakas = $this.attr("data-lakas"); 
      alert(lakas); 

      // Post data to ajax.php 
      $.post('ajax.php', { 

       action  : 'scrollpagination', 
       number  : $settings.nop, 
       offset  : offset, 
       lakas   : lakas 

      }, function(data) { 

        // Append the data to the content div 
        $this.find(".calendar").empty().append(data); 

        // No longer busy! 
        busy = false; 

      }); 

      $.post('month.php', { 

       action  : 'scrollpagination', 
       number  : $settings.nop, 
       offset  : offset 

      }, function(data) { 

        offset = offAdd; 

        // Append the data to the content div 
        $this.find('.cal-month').empty().append(data); 

        // No longer busy! 
        busy = false; 

      }); 

     } 

     //Run it for the first time 
     getData(); 

     // Also content can be loaded by clicking the loading bar/ 
     $this.find('.cal-prev').click(function() { 

      if(busy == false) { 
       busy = true; 
       getData(false); 
      } 

     }); 

     $this.find('.cal-next').click(function() { 

      if(busy == false) { 
       busy = true; 
       getData(true); 
      } 

     }); 
} 

})(jQuery); 

Answer 1

您在這裏設置全局變量：

$this = $(this); 
$settings = settings; 

真正含義是：

window.$this = $(this); 
window.$settings = settings; 

什麼你可能打算是：

var $this = $(this); 
var $settings = settings; 

這只是一個bug，可能還有更多bug。

---

這裏同樣，這些都是全局：

 if (add == true) {offAdd = offset+$settings.nop; } else { offAdd = offset-$settings.nop; } 
     offset = offAdd; 
     lakas = $this.attr("data-lakas"); 

offAdd，偏移，lakas，這些都需要一個var在他們面前，使他們局部變量。

當你有2個該函數的實例時，它們會覆蓋彼此的變量。 （因爲它們是全局變量）