Как использовать методы класса в jQuery-функциях?

Question

Я хочу, чтобы автоматизировать цветной родительский чейнджер в моем js.

вот мой HTML:

<div id="parent"> 
    <div id="target" > 
     traget 
    </div> 
</div> 

А вот мои ЯШИ:

function ColorBox(target_id, btn) { 

    this.parent = $("#" + target_id).parent(); 

    this.color = $(this.parent).append('<div class="color" >ops</div>'); 
    $(this.color).append('<button class="change" value="' + btn + '">' + btn + '</button>'); 

    this.ChangeColor = function (elm_id) { 
     $(this.parent).css('background', $(elm_id).val()); 
     return true; 
    } 
    // here my problem start 
    $("#" + $(this.parent).attr('id') + " .change").bind('click', function() { 
     // how I can do it in here. 
     ColorBox.ChangeColor($(this)); 
    }); 

} 

$(document).ready(function() { 
    ColorBox('target', 'red'); 
}); 

Я добавить некоторый элемент целевой родительские и я хочу при нажатии на change классе ColorBox.ChangeColor выполнить и, но в метод связывания Я не могу использовать this.ChangeColor.

Теперь, как я могу это сделать?

Answer 1

Попробуйте ограничить область действия, назначив this переменной (например, self). Это позволит избежать любых проблем с доступом к функциональным переменным и функциям внутри разных областей.

Вот рабочий пример: http://jsfiddle.net/37zq5/10/

Здесь вы можете увидеть изменения кода, которые я сделал:

function ColorBox(target_id, btn) { 

    var self = this; 

    self.parent = $("#" + target_id).parent(); 
    self.color = self.parent.append('<div class="color" >ops</div>'); 
    self.color.append('<button class="change" value="' + btn + '">' + btn + '</button>'); 

    $("#" + self.parent[0].id + " .change").on('click', function() { 
     self.parent.css('background', this.value); 
    }); 

}; 

$(document).ready(function() { 
    new ColorBox('target', 'red'); 
    new ColorBox('target2','lime'); 
}); 

Answer 2

Лично я, вероятно, сделаю это таким образом. Это немного другой подход; Вам не нужно this, вам не нужно new, и это меньше кода:

function ColorBox(target_id, btn) { 
    var $parent = $("#" + target_id).parent(); 
    var $color = $('<div class="color">ops</div>').appendTo($parent); 
    var $button = $('<button class="change" value="' + btn + '">' + 
      btn + '</button>').appendTo($color); 

    $button.on('click', function (event) { 
     $parent.css('background', $button.val()); 
    }); 
} 

$(document).ready(function() { 
    ColorBox('target', 'red'); 
}); 

ли вы принять этот подход или сделать что-то больше похоже @ ответ Джо, есть одна вещь, которую вы должны обязательно изменить на работу как у меня есть в этом коде. Переменные parent и color являются уже объектами jQuery; нет необходимости обертывать их дополнительными вызовами $(), когда вы их используете. Поэтому измените имена этих переменных, чтобы включить префикс $ в качестве напоминания о том, что они являются объектами jQuery, а затем просто используйте их прямо там, где они вам нужны, вместо дополнительной оболочки $().

Если вы используете self как в @ ответ Джо, то это будет такой код:

self.$parent = $("#" + target_id).parent(); 
self.$color = self.$parent.append(...); 

$ префикс этих имен не является необходимым, но это общее соглашение, чтобы указать переменную или свойство это объект jQuery. Это помогает держать прямо, нужно ли вам использовать другой $() вокруг него.

Также помните, что переменные parent и color являются одним и тем же элементом. Похоже, вы ожидаете, что color будет элементом <color>, но это не так. Я изменил код, так что это элемент <color>.