Store variable from one event handler to be used by another event handler

Question

I have this code:

$("#open").click(function()
{
 var pos = $(window).scrollTop();
 /* the next lines of code affects the value
  * of 'pos'.
  */
});

$("#close").click(function()
{
 var pos = /* what i want here is the $(window).scrollTop(); 
            before the #open event handler changes it's value. */
 //another code of mine.
});

Can anyone help me with this? Thanks in advance.

Answer 1

it's very simple, make variable global

var pos; //global variable
$("#open").click(function()
{
 pos = $(window).scrollTop();
 /* the next lines of code affects the value
  * of 'pos'.
  */
});

$("#close").click(function()
{
 // use pos here accordingly
 //another code of mine.
});

Answer 2

You can store the original window DOM contents before you call any functions:

var pos;

$("#open").click(function(){
    pos = $(window).scrollTop();
});

$("#close").click(function(){
    $(window).height(pos);
});

Docs

• http://api.jquery.com/scrollTop/
• http://api.jquery.com/height/

Answer 3

You could just organize a little your code and do this:

function MyApp(){
   var self = this;

   this.pos = "";
   this.temp = $(window).scrollTop();   //store initial value 

   this.wire = function(){
      $("#open").click(self.open);
      $("#close").click(self.close);
   }

   this.open = function(){
     self.pos = $(window).scrollTop();
      /* the next lines of code affects the value
       * of 'pos'.
       */
   }

   this.close = function(){
     self.pos = /* what i want here is the $(window).scrollTop(); before
            * the #open event handler changes it's value.
            */
        //another code of mine.
     var original = self.temp;  //here get the initial stored value
   }


}

Example:

<script type="text/javascript">
    $(function() {
        var app = new MyApp();
        app.wire();         //wire handlers
    });
</script>

Answer 4

I'd use a variable local to an anonymous function:

(function() {
    var context = {};
    $('#open').click(function() {
        context.pos = $(window).scrollTop();
    });
    $('#close').click(function() {
        // Do something with context.pos
    });
})();

Your code and explanation don't make this clear, but the above maintains an assumption from your code: That close cannot be clicked unless open has been clicked, and open cannot be clicked again until close has been clicked. But that really depends on your code - if that assumption isn't true I'd approach it differently (if that assumption isn't true, clicking close here risks getting an undefined).

Answer 5

More safe way.

 $("#open").click(function() {
            $("#close").attr("data-pop", $(window).scrollTop());

        });

        $("#close").click(function() {
            var pos = $(this).attr("data-pop");
        });