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>