Snap.svg — 单击其中一个元素时删除一个对象

Question

我有一个对象，它在一组中绑定了 3 个元素，当单击绿色矩形时，我需要删除该对象（或至少它的图形表示 - 组）。 a.click() 有效，但 c.click() 无效，我想知道原因：

var s = Snap(500, 500);

function myObj() {

    this.g = s.group();

    this.drawIt = function() {

    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(this.killIt);
    }

    this.killIt = function() {
        this.g.remove();    
    }

}

var obj = new myObj();

obj.drawIt();

Snap.svg 0.3.0。

…

已解决：http://codepen.io/GeMir/pen/KwbBqV

Answer 1

这是关闭的问题，c.click 处理程序中的this 不代表myObj。

在构造函数myObj 中声明一个变量var that=this;，如下所示

function myObj() {

  var that = this;

  this.g = s.group();

  this.drawIt = function() {
    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(function(e){that.killIt()});
  }

  this.killIt = function() {
            this.g.remove();    
  }

}

var obj = new myObj();

obj.drawIt();

如果在另一个函数中声明一个函数，this 变量将与父函数的变量不同。在这种情况下，它将指向c对象，在a.click的情况下，由于this指向a，它起作用了。