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 ，偏移， lakas ，这些需要var才能使它们成为局部变量。

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

调用多个元素不起作用，只调用最后一个元素

1 个答案: