CODEWITHSUNDEEP
jqueryjquery-plugins
Neo Chang
Neo Chang

Reputation: 31

How to use $(this) in custom jquery plug-in

This is my code

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

I want get $(this) -> $('#J_todayComm'), but It is $(doucmen)。

My plug-in code 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("Need Template");
        }
    }, options);
    console.log(s.ajaxUrl); //I want it is $('#J_todayComm')
    // jquery对象
    var $self = this;
    // 原生DOM对象
    var self = this[0];
    ......
    function getDate() {
        if (!s.ajaxUrl) {
            console.error('Need url');
            return '';
        }
        $.ajax(s.ajaxUrl, {
            method: s.ajaxMethod,
            data: s.ajaxData,
            dataType: 'json',
            success: function (res) {
                ...
            },
            error: function () {
                ...
            }
        });
    }

    return $self;

};

How do I write code? Thx everyone.

Upvotes: 1

Views: 32

Answers (2)

Rach Chen
Rach Chen

Reputation: 1402

code 

$.fn.extend({
  myScroll:function(){
    console.log(this);//這是你的本物件了
  }
})

$('#J_todayComm').myScroll();

change the other way to extend the fn then you don't depend on orign jquery funtion and can got this of you object (and without your options).

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337743

To make the this keyword refer to the element in the selector, you need to change the scope of your call. You could do that by iterating through the elements using each():

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

Upvotes: 1

Related Questions