CODEWITHSUNDEEP
javascriptjquery
Robert
Robert

Reputation: 816

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');
    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

Upvotes: 2

Views: 127

Answers (5)

PeeHaa
PeeHaa

Reputation: 72672

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);
  }

Upvotes: 1

FishBasketGordo
FishBasketGordo

Reputation: 23132

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');
});

Upvotes: 4

Naftali
Naftali

Reputation: 146302

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

Upvotes: 2

Abe Miessler
Abe Miessler

Reputation: 85046

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);
}

Upvotes: 1

Paul
Paul

Reputation: 141839

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');

Upvotes: 1

Related Questions