Need the class of a parent function's returned element

Question

Hello,

Somewhat new to jQuery, so excuse the attempt at properly identifying things.

I need an element's id to be reflected in a selector that is a couple functions deep, and I'm not quite sure how to go about doing that.

$("input[type='file'][id^='pic_']").change(       //I need this element's id...
 function()
 {
  $("."+this.id).hide("fast",
   function()
   {
    //..to be reflected in this class selector
    $("."+this.id).attr("checked", true);
   }
  );
 }
);

Thanks for your help in advance. :-)

Answer 1

Seems like a question of variable scope:

$("#my_input").change(function() {
    var my_id = $(this).attr('id');
    $(this).hide('fast', function() {
        alert(my_id); // Will show an alert with the id from above.
        alert($(this).attr('id')); // *Should* show an alert with the same id.
    });
});

Answer 2

The this variable in an event callback is the DOM element hosting the event. In the change function callback, this is the element changed. Therefore:

$("input[type='file'][id^='pic_']").change(
  function() {
    $(this).hide("fast",
      function() {
        $(this).attr("checked", true);
      }
    }
  }
}

Answer 3

This uses closures to bring a variable with the id into the scope of the innermost function.

$("input[type='file'][id^='pic_']").change(       //I need this element's id...
        function()
        {
                var fileSelector = "." + this.id;
                $(fileSelector).hide("fast",
                        function()
                        {
                                //..to be reflected in this class selector
                                $(fileSelector).attr("checked", true);
                        }
                );
        }
);