如何使用Snap.svg对单个SVG元素做出独特的响应？

Question

I've been looking for hours and nothing (including related StackOverflow threads) has gotten me any closer. This problem seems so simple, but it apparently isn't based on the lack of info I can find.

I'm trying to make an interactive piano with Snap.svg where you can click each key and it will play its respective note. I've tried two methods so far:

Method 1: A simple FOR loop that makes all the rects and adds an event listener.

<script>
  window.onload=init();
  var S=Snap(500,100);
  var w=15;  var h=100;

  function init() {
    for (i=0;i<10;i++) {
      S.rect(i*w,0,w,h).attr{(id:i)}.click(console.log(this.id));
    }
  }
</script>

'undefined' is what I get when I click.

Method 2: I tried wrapping the SVG element in a JS object.

<script>
  window.onload=init();
  S=Snap(500,100);
  var h=15;  var w=100;
  var notes=['A','B','C',...];

  function Key(id, x, note) {
    this.id=id;
    this.x=x;
    this.note=note;
    this.drawSvg=function() {
            var keyImg=S.rect(x,0,w,h);
            keyImg.attr({ ... });
            keyImg.click(callback);
            return keyImg;
          }
    var callback=function() {
           console.log(this.note, "clicked!");
           return 0;
         } 
  }//Key() 

  function init() {
    var keys=[];
    for (i=0;i<10;i++) {
       keys[i]=new Key(i,i*w,notes[i%12]);
     }
    for (j=0;j<keys.length;j++) {
       keys[j].drawSvg();
     }
  }
</script>

This almost works. It draws properly but every key I click I get 'undefined "Clicked!" .

I know it's because the 'this' in callback() isn't the same 'this' in the Key constructor.

So my question is: How do I get the callback() function to 'know' what object it's being called from so I can use that object's own attributes within the callback?

Any help is appreciated. Thanks.

Answer 1

Heres a way that includes 2 methods. In your first example, you have attr wrong with the parenthesis.

Also, a click handler must take a function as an arg, this way 'this' will be correct. So something like...

jsfiddle

Edit: I've added 2 methods that can be used, from different angles.

 r.data('key', new Key( i )); 

Assocate an object as a data element to the Snap object.

 r.click( clickHandler.bind(r, key2));

Bind an object to the handler, so it gets passed as an arg.

Here is the whole lot. You can shorten it a bit depending on which method works best.

var w=15;  var h=100;

function altKey( id ) {
   this.id='anotherkeymethod ' + id;
};

function Key(id ) {
    this.id='key' + id;
};

function init() {
    var r, key2;

    for (i=0;i<10;i++)      {
        key2 = new altKey( i );

        r = S.rect(i*w,0,w,h)
             .attr({ id:i, fill: 'blue' });

        r.data('key', new Key( i ));          // Method 1
        r.click( clickHandler.bind(r, key2)); // Method 2

    }
  }

function clickHandler( myKeyEl ) {
    console.log(this.id, this.data('key'), myKeyEl);
};

init();