Блог

Допустим, у меня есть класс, составленный следующим образом:

 function slider() {

    this.init = function(options, title, content) {
        var self = this;
        $('body').append('<button type="button">'   title   '</button>')
    },    
    this.create = function(title, content, options) {
        var self = this;
        self.init(options, title, content);
    },
    this.closeSlider = function(elem) {
        var self = this;
        self.assignPositions();    
    },

    this.assignPositions = function() {
        alert('assign positions called from button?');
    }
}
 

Чтобы создать «слайдер», я использую это:

var slider = new slider();

Затем я вызываю функцию create:

slider.create('title', 'content');

Мой вопрос в том, как я могу привязать функцию closeSlider к кнопке, но она связана только с экземпляром, который ее создал? Если это имеет смысл?

В принципе, у меня будет много кнопок с функцией ‘closeSlider’, и я не хочу, чтобы все они срабатывали одновременно, я только хочу, чтобы они были связаны с экземпляром, который его создал.

Это также ОЧЕНЬ урезанная версия моего класса, просто пытаюсь разобраться с этой маленькой проблемой 🙂

Приветствия

Используйте привязку к функции обратного вызова при настройке обратного вызова события

 this.init = function(options, title, content) {
    var btn = $('<button type="button">'   title   '</button>');
    btn.click(this.closeSlider.bind(this));
    $('body').append(btn)
},  
 

Это сделает так, чтобы при closeSlider вызове функции она сохраняла контекст slider экземпляра, который ее создал. Но примечание this больше не будет контекстом элемента html, который вызвал событие. Итак, вам нужно будет получить цель из event.target

Может быть другой способ сделать это без потери контекста html-элемента, который мне нужно будет просмотреть и отредактировать заново.

Редактировать

Использование event.target

 this.init = function(options, title, content) {
    var btn = $('<button type="button">'   title   '</button>');
    btn.click(this.closeSlider.bind(this));
    $('body').append(btn)
},  
this.closeSlider:function(event){
   //`this` will refer to slider instance
   //and event.target will be the button dom object
   var element = event.target;
});
 

Передача объекта button в качестве аргумента в bind

 this.init = function(options, title, content) {
    var btn = $('<button type="button">'   title   '</button>');
    btn.click(this.closeSlider.bind(this,btn));
    $('body').append(btn)
},  
this.closeSlider:function(btn,event){
   //`this` will refer to slider instance
   //btn will refer to the jQuery wrapped button dom object
   //event.target will still refer to the button dom object
});
 

Вместо того, чтобы просто добавлять строку к телу, создайте живой элемент с помощью события onclick document.createElement и присоедините его к событию onclick, прежде чем выпускать его в открытый доступ.

Вот пример:

 function slider() {
    this.init = function(options, title, content) {
        var myButton = document.createElement("button");
        myButton.setAttribute("type", "button");
        myButton.innerHTML = title;
        myButton.onclick = this.closeSlider;

        $('body').append(myButton);
    },
    //Other object definitions
}
 

Прежде всего, вы должны добавлять методы в прототип, а не в каждый экземпляр (экономит память).

Во-вторых, вы можете использовать jQuery .proxy() для создания анонимной функции, которая будет «привязывать» это к определенному значению при вызове вашего метода.

 // empty constructor
function slider() 
{
}

// define prototype
$.extend(slider.prototype, {
    init: function(options, title, content) {
        $('<button>', { text: title })
            .on('click', $.proxy(this, 'closeSlider'))
            .appendTo('body');
    },
    create: function(title, content, options) {
        this.init(options, title, content);
    },
    closeSlider: function(event) {
        // event.target is the HTML element
        this.assignPositions(event.target);
    },
    assignPositions: function(elem) {
        alert('assign positions called from button?');
    }
});