javascript - 调用多个元素的分页不起作用，仅调用最后一个元素

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;

这只是一个错误，可能还有更多错误。

<小时/>

在这里，这些都是全局变量:

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

offAdd、offset、lakas，这些需要在它们前面加上var以使其成为局部变量.

当您有该函数的 2 个实例时，它们会覆盖彼此的变量。 (因为它们是全局变量)