jquery 插件开发 调用者 $(this) 的指向问题

Question

代码如下：

$('#J_todayComm').myScroll({
    ajaxUrl: $(this).attr('data-url') //  $('#J_todayComm').attr('data-url')
});

我期望 $(this) -> $('#J_todayComm')。 但如今是 $(doucmen)。

我该如何实现？

myScroll.js部分代码

$.fn.myScroll = function (options) {
    var s = $.extend({
        debug: false,
        threshold: 65,
        loading: false,
        ajaxUrl: '',
        ajaxMethod: 'GET',
        ajaxData: {},
        loadSuccess: function () {
        },
        template: function () {
            console.error("需要模板代码");
        }
    }, options);
    console.log(s.ajaxUrl); //我期望的 调用者 $('#J_todayComm')
    // jquery对象
    var $self = this;
    // 原生DOM对象
    var self = this[0];
    ......
    function getDate() {
        if (!s.ajaxUrl) {
            console.error('需要数据请求地址');
            return '';
        }
        $.ajax(s.ajaxUrl, {
            method: s.ajaxMethod,
            data: s.ajaxData,
            dataType: 'json',
            success: function (res) {
                ...
            },
            error: function () {
                ...
            }
        });
    }
    
    return $self;

};

=====回答=====

@弦动我心 感谢你的回答。

$(function () {
    $.fn.myScroll = function (options) {
        // 在这里面 this 就是 原先的$(this)。再次$()包裹还是$(this) 如下图
        console.log(this);
        console.log($(this));
    };

    $('#btn').myScroll();
});

再次： 我需要在调用的时候获取到 $(this)

$('#btn').myScroll({
    ajaxUrl: $(this) //这里, 非插件插件里面
});

====更新====

stackoverflow 上给的方案

$('#J_todayComm').each(function() {
  var $el = $(this);
  $el.myScroll({
    ajaxUrl: $el.data('ajax-url'),
    // other settings...
  });
});

Answer 1

你这里ajaxUrl的逻辑应该是

{ajaxUrl: '#J_todayComm'}

一个字符串比较好吧. 为什么要传入一个元素呢?

还有

$('#J_todayComm').myScroll({
    ajaxUrl: $(this)
});

你的原文, 这里获取$(this), 他的作用域是和$('#J_todayComm')同域的.
所以我猜你是直接放在全局里,
当然就是$document了.

------更新------

//如果坚持想要使用ajaxUrl为一个元素的话,
var $ele = $('#J_todayComm')
$ele.myScroll({
    ajaxUrl: $ele
});

//其实我换一种写法, 就很清晰了

var $ele = $('#J_todayComm'),
options = {
    ajaxUrl: $ele
};

$ele.myScroll(options);

Answer 2

$.fn.myScroll = function (options) {
    var $this = $(this);
    // do something
};