getting data out of a function

Im sort of new to this, but I was wondering how I can grab the data (ie:shapeID) from this function and pass it on to other functions making it a global variable.

$('.shapes li').click(function(shapeId){
    var shapeId = $(this).find('a').attr('id');
    var shapeImg = $(this).find('img开发者_StackOverflow社区');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');
});

thanks

Just declare shapeId outside of the function:

var shapeId = null;

$('.shapes li').click(function(){
    shapeId = $(this).find('a').attr('id');
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');
});

You can use a callback:

$('.shapes li').click(function(){
    var shapeId = $(this).find('a').attr('id');
    setShapeID(shapeID);
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');
});

function setShapeID(id){
   shapeID = id; //<<in global namespace
}

Then in any other function if you want to use it check if it is defined:

if(shapeID !== undefined){
    //use it!
}

The above is under assumption that you want to pollute the global namespace.

If you do not want to do that, then you can use an object to hold your id:

var IDs = {
    shape: null
}

$('.shapes li').click(function(){
    var shapeId = $(this).find('a').attr('id');
    IDs.shape = shapeID; //<<set the shapeID
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');
});

Then outside you can use the shapeID easily by doing IDs.shape

The other answers have it right except for it to work you also have to remove shapeId from your function arguments list. It doesn't make any sense there anyways since it just assigns an Event object to it and then you overwrite it write away.

Change:

$('.shapes li').click(function(shapeId){
    var shapeId = $(this).find('a').attr('id');

To:

var shapeId; // shapeId in outer scope
$('.shapes li').click(function(){
    shapeId = $(this).find('a').attr('id');

If you want to access ShareId outside of your function just declare it outside of the function:

var shapeId;
$('.shapes li').click(function(shapeId){
    shapeId = $(this).find('a').attr('id');
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');
});

function whatever(){
   alert(shapeId);
}

Instead of making it a real global variable perhaps you can wrap it in an anonymous function?

(function($) {
  var shapeId;
  $('.shapes li').click(function(){
    shapeId = $(this).find('a').attr('id');
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');

    myfunction();
  });

  function myfunction()
  {
      console.log(shapeId);
  }
})(jQuery);

Or call the function from within the current function:

  $('.shapes li').click(function(){
    var shapeId = $(this).find('a').attr('id');
    var shapeImg = $(this).find('img');
    step2.find('div.wrapper').attr('id', shapeId);
    shapeImg.clone().appendTo('#step2 .model', '#results .model');
    step1.fadeOut('500',shownext);
    step2.find('.waist_box').show();
    step2.find('.hotspots #waist').addClass('active');

    myfunction(shapeId);
  });

  function myfunction(theId)
  {
    console.log(theId);
  }