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创建一个对象，其中一类"项目"，该对象中的所有功能都适用于该div。即，当您单击红色Div时，应在下面的面板中显示容器的ID。

在loadevents函数中，我列出了当前div的ID。这是立即并正确列出" Modal-1"one_answers" Modal-2"的。但是，当我在单击按钮后运行相同的命令时，最后一个DIV的ID总是显示出来，而不是当前Div。

如何使按钮单击工作，以便显示正确的DIV的ID？

谢谢

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>