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

- georgmierau

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变量将不同于父函数的this变量。在这种情况下，它将指向c对象。在a.click的情况下，由于this指向a，所以它有效。

- Prashanth Pamidi

---

谢谢！that.killIt()仅删除“a”而不是整个组。有没有办法删除包括“a”，“b”和“c”形状的组？ - georgmierau

因为g中只有a，所以请尝试使用this.g.append(a); this.g.append(b);this.g.append(c);而不是this.append(a,b,c)。这样做可以解决问题。 - Prashanth Pamidi

谢谢！我以前从未使用过带有多个参数的append。 - georgmierau

有趣的是，将 this.killIt 替换为 () => {this.killIt()} 也是有效的吗？ - Dave Elton