JavaScript向对象添加方法

Question

I'm trying to extend a jQuery object but having some difficulty doing so.

$(document).ready(function() {
    $('.single-item').slick({
        dots: true,
        infinite: false,
        speed: 500,
        customPaging: function(slider, i) {
            // Theres a lot of stuff in this, removed for brevity
        },
        progressBar: function(slider, i) {
            // Want to create this method
            // alert is not defined
            window.onload(window.alert("YES"));
        }
    });
    // slick is not defined
    console.log(typeof(slick));
});

I'm trying a lot of things such as using jQuery's "extend":

var progressBar = function(slider, i) {
    window.onload(window.alert("YES"));
};
$.extend(slick, progressBar);
// Also tried '.slick-slider' in place of slick

Also tried implementing:

$.fn.progressBar = function(i) { 
    window.onload(alert(this.i))
};

$('.single-item').progressBar(i);

"customPaging" exists in the main js file, which I do not want to alter -- but rather extend additional methods to the object. It takes "slider" and "i" as parameters. Since it already exists in the main js file, it was easy enough to manipulate it.

However, I want to create an entirely new method called "progressBar" that also has access to the object's "slider" and "i" variables.

Can anyone help me understand what's going on and demonstrate how to create the method "progressBar" like I want?

Answer 1

Its not working because you adding method to configuration object of some plugin, not extending jquery element. If you want to add new method to the plugin you will probably have to edit its code.