Question

I’m not sure how to state this question correctly, but I am trying to create a javascript object which handles an array of images so that they can be reordered/moved around.

function imgHandler(divname) {
    this.imgDiv = divname;
    this.img = Array("bigoldlizard.png","scarytiger.gif");
    this.update = function() {
        var htmlstr = "";
        for(i=0; i<this.img.length; i++) {

//This is the line in question:
        htmlstr += "<img src=\"" + this.img[i] + "\" onclick=\"javascript:" + ??? + ".remove(" + i + ")\"/></span>";

        }
        $("#" + this.imgDiv).html(htmlstr);
    }

    //remove an image from the array
    this.remove = function(index) {
        if (index >= 0 && index < this.img.length) {
            this.img.splice(index, 1);
            this.update();
            return true;
        }
        else
            return false;
    }
}

So basically, I need the object to be able to add its own name, or be able to reference itsself…

Answer 1

Create elements instead of HTML code, and create a closure to preserve the variables in the loop iteration, then the event handler code can use the variables:

  this.update = function() {
    var i, img;
    for(i=0; i<this.img.length; i++) {

      // closure for "this" and "i"
      (function(t, i){

        img = $('<img/>', { src: this.img[i] }).click(function(){
          t.remove(i);
        });

      })(this, i);

      $("#" + this.imgDiv).append(img);
    }
  }