引用对象的最后一个对象而不是自身的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);
        })
    }
});

here is a fiddle

我希望为每个div创建一个带有“ item”类的对象，并且该对象中的所有函数都适用于该div。即，当您点击红色div时，该容器的ID应显示在下面的面板中。

在loadEvents函数中，我列出了当前div的ID。它会立即运行，并正确列出“ modal-1”和“ 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>