Question

我已经了解到，出于范围原因，嵌入在对象中的事件侦听器内的this关键字不是指向全局对象，而是指向触发事件的元素。

现在，我明白如果我想获取一个属性，我可以在调用事件处理程序之前将其保存到变量中。但是，如果我想操纵房产的价值，我该怎么办？

在下面的一段代码中，我试图操纵drugCount事件监听器中的removeDrug属性。

var Drugs = {

    drugs: $("#drugs_table"),
    drugRow: $("#drug").html(),
    drugCount: 0,

    init: function() {
      this.addDrugRow();
      this.removeDrugRowHandler();
    },

    addDrugRow: function() {
     this.drugCount++;
     this.drugs.append(this.drugRow.replace(/{{id}}/,this.drugCount));
     $(".drugsSelect").select2();
    },

    removeDrugRowHandler: function() {

    drugCount = this.drugCount; 
     // also a problematic solution, because it only retains the inital drugCount. 
     // i.e I need a way to access the "live" count from within the event

        $(document).on("click",".removeDrug",function(){
            if (drugCount>0) {

                $(this).parents("tr").remove();
                this.drugCount--; // how should I approach this?
            }
        });
    }
}

Answer 1

试一下

var Drugs = function() {

    var me = this;

    me.drugs = $("#drugs_table");
    me.drugRow = $("#drug").html();
    me.drugCount = 0;

    me.init = function() {
          this.addDrugRow();
          this.removeDrugRowHandler();
    };

    me.addDrugRow = function() {
         this.drugCount++;
         this.drugs.append(this.drugRow.replace(/{{id}}/,this.drugCount));
         $(".drugsSelect").select2();
    };

    me.removeDrugRowHandler= function() {

        var drugCount = me.drugCount;

        $(document).on("click",".removeDrug",function(){
            if (drugCount>0) {

                $(this).parents("tr").remove();
                me.drugCount--;
            }
        });
    }
}

Answer 2

事实证明，简单的解决方案是使用对象名称而不是上下文this。因此我使用this.drugCount代替Drugs.drugCount。

但是，此解决方案仅在我处于单个对象的上下文中时才有效。如果我要写一个“类”（即var Drugs = function(){ ... }），这将无效。

在事件处理程序中操纵对象的属性

2 个答案: