Использование функции «Конструктор и вызов»

Question

У меня есть форма, в которой много элементов скрыто/показано в зависимости от выбранного флажка. Я решил написать конструктор, чтобы избежать повторения. Он принимает два параметра. Флажок и элемент, который должен отображаться/скрываться.

function ShowHideConstructor(controlElement, actionElement){ 
    this.x = controlElement; 
    this.y = actionElement; 

x.change(function(){ 
    var isChecked = x.is(":checked"); 

    if (isChecked){ 
     y.show(); 
    } else { 
     y.hide(); 
    } 

    }); 
} 

И я хочу, чтобы стрелять по:

var ce = $('#c85_add_residence_address-0'); 
var ae = $(".address_of_residence"); 

ShowHideConstructor(ce,ae); 

Это работает! Проблема beggins, когда я призываю его второй раз, как:

var ca = $('#c85_add_correspondence_address-0'); 
var ac = $('.address_for_correspondence'); 

ShowHideConstructor(ca,ac); 

Когда у меня есть два из них ломается. Зачем ?

Answer 1

Это потому, что вы забыли new так this находится снаружи this (в зависимости от того, где вы называете, что это может быть window). Поэтому во второй раз, когда вы его вызываете, вы заменяете свойство x и y первого.

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

new ShowHideConstructor(ca,ac); 

И в конструкторе, замените все x и y с this.x и this.y.

Это, как говорится, такой побочный эффект на конструкторе, когда вы даже не держите новый экземпляр, не является особенно хорошей практикой. Я предпочел бы сделать это в два этапа: постройте экземпляр , затем выполните привязку функции к событию change.