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

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

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

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，它可以正常工作。

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

1 个答案: