Установка onclick для каждого экземпляра пользовательского объекта и передача свойства в функцию

Question

Я создаю настройщик продукта с HTML, CSS и Javascript, и я настроил пользовательский объект под названием «Компонент».Я создаю новый экземпляр Component с ключевым словом «new» для каждого отдельного компонента каждого продукта, так как они будут обрабатываться независимо на основе пользовательского ввода.Каждый компонент имеет в HTML элемент div, который выглядит следующим образом:

<div class="component" id="ABC123">
                <div class="checkBox"><div class="checkmark"> </div>  </div>
                <div class="nameLabel"><h4>ABC-123</h4> </div>
                <div class="priceLabel"><h5 id="ABC123-PRICE"></h5> </div>
            </div> <!-- ABC 123 -->

А вот соответствующий javascript:

function Component(id, model, htmlid, cost) {
this.id = id;
this.model = model;
this.htmlid = htmlid;
this.cost = cost;
this.element = document.getElementById(htmlid);
this.picture = document.getElementById(htmlid + "-PIC");
this.plabel = document.getElementById(htmlid + "-PRICE");
this.active = false;

//****This is the problem line:****
//this.element.onclick = function() {
//                             selectUnselect(this);
//                          };
//this.element.onclick = selectUnselect(this);
}


// Set: VAR NAME, MODEL, HTML ID, COST
var ABC123 = new Component(ABC123, ABCSeries, "ABC123", 100);
var DEF456 = new Component(DEF456, ABCSeries, "DEF456", 200);
var GHI789 = new Component(GHI789, ABCSeries, "GHI789", 300);


function selectUnselect(component) {
console.log(component);
//Simplified for troubleshooting
}

Что касается компонентов, я собираюсьесть около 10 для каждого из множества различных продуктов, поэтому я хотел бы автоматизировать процесс, а не писать такие строки:

ABC123.element.onclick = function() {
    selectUnselect(ABC123);
    };

для каждого компонента.Я только включил несколько компонентов здесь, чтобы дать идею.

Две прокомментированные строки кода под отмеченной «Строкой проблемы» - это две вещи, которые я пробовал - моя цель - заставить каждый добавленный компонент передавать свою переменную в функцию selectUnselect, когда его элемент (нажата кнопка div в html).

• Первая строка с комментариями приводит к тому, что console.log выводит «undefined» при каждом нажатии на один из компонентов div.
• Вторая закомментированная строка правильно печатает каждый экземпляр компонента, но делает это автоматически при загрузке страницы и не реагирует на события щелчка.

Как передать переменную в функцию, когда она нажатадля каждого экземпляра компонента?

Answer 1

Проблема с вашей первой строкой заключается в том, что в javascript, когда функция не вызывается как метод (myObj.myFunc ()), переменная 'this' не привязана к контексту объекта, в котором была объявлена ​​функция, онаскорее привязан к глобальному объекту.

В вашем случае 'this' связан с инициирующим элементом HTML - как это всегда имеет место с событиями DOM (такими как onclick).

'компонент 'должен фактически дать вам элемент HTML, который вызвал щелчок.

Проблема со второй строкой заключается в том, что вы выполняете функцию и присваиваете результат обработчику onclcik.

Что вы хотитеЧтобы исправить первую строку, нужно выполнить следующее:

that = this;
this.element.onclick = function(){
  selectUnselect(that);
};

Причина, по которой она работает, заключается в том, что хотя функция не привязана к 'this' контекста объекта, в котором она была объявлена, все остальныеей видны переменные контекста объекта, в котором была объявлена ​​функция.