Объект Javascript, ссылающийся на последний тип объекта вместо самого себя

Question

У меня есть объект javascript, который я создаю для каждого экземпляра объекта dom.Мой код выглядит примерно так:

let div = null;

$(function() {
    div = {
        init: function(container) {
            this.loadDom(container);
            this.loadEvents();
        },

        loadDom:function(container) {
            this.$container = $(container);
            this.$buttons = this.$container.find('.button');
            this.$textPanel = $('.text-panel')
        },

        loadEvents: function() {
            let that = this;

            // output the item's id. This works correctly
            that.$textPanel.append(that.$container.attr('id') + '<br>');

            this.$buttons.on('click', function() {

                // output the item's id. This always outputs the last item
                that.$textPanel.append(that.$container.attr('id') + '<br>');
            });
        }
    };

    let divs = $('.item');
    if(divs.length > 0) {
        divs.each(function(){
            div.init(this);
        })
    }
});

, вот скрипка

Я ожидаю, что для каждого div будет создан один объект с классом 'item',и все функции в этом объекте, чтобы применить к этому одному div.т.е. когда вы щелкаете по красному элементу div, идентификатор контейнера должен отображаться на панели ниже.

В функции loadEvents я перечисляю id текущего div.Это запускается сразу и правильно перечисляет «модал-1» и «модал-2».Но когда я запускаю ту же команду после нажатия кнопки, всегда отображается идентификатор последнего элемента div, а не текущий элемент div.

Как сделать так, чтобы нажатие кнопки работало так, чтобы отображался идентификатор правильного элемента div?

Спасибо

Answer 1

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

Кроме этого, переменнаяthat был неявно глобальным, поэтому я добавил let перед ним, чтобы он правильно охватывался.

Теперь он работает как задумано

let div = null;

$(function() {
	div = function(){
  	return {
      init: function(container) {
        this.loadDom(container);
        this.loadEvents();
      },

      loadDom:function(container) {
        this.$container = $(container);
        console.log('con')
        this.$buttons = this.$container.find('.button');
        this.$textPanel = $('.text-panel')
      },

      loadEvents: function() {
        let that = this;

        // output the item's id. This works correctly
        that.$textPanel.append(that.$container.attr('id') + '<br>');

        this.$buttons.on('click', function() {

          // output the item's id. This always outputs the last item
          that.$textPanel.append(that.$container.attr('id') + '<br>');
        });
      }
    }
  }


	let divs = $('.item');
  if(divs.length > 0) {
  	divs.each(function(){
    	const _d = new div();
    	_d.init(this);
    })
  }
})

.container {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
}

.item {
  border: 1px dotted green;
  height: 100px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.button {
  height: 50px;
  width: 50px;
  background: red;
  cursor: pointer
}

.text-panel {
  border: 1px dotted black;
  height: 200px;
  grid-column: 1/3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item" id="modal-1">
   <div class="button">click me</div>
   modal-1
  </div>
  <div class="item" id="modal-2">
   <div class="button">click me</div>
   modal-2
  </div>
  <div class="text-panel"></div>
</div>