Question

I have the following jQuery code. As you can see, I have an alert that display the current tab that I am on based on the value from this.getIndex().

My question is, how can I get access to this value, so that I can use it within other JavaScript functions that don’t reside with the ready(function)?

I want to be able to say instead:

tabIndx = this.getIndex() and when this value changes, I want to use it within another function down below, outside of the ready(function), say

var tabIndx;

$(document).ready(function(){ 

    // initialize scrollable 
    $("div.scrollable").scrollable({
        size: 1,
        items: '#thumbs',  
        hoverClass: 'hover',
                onSeek: function() {
                  alert("Current tab is: "+ this.getIndex()); 
                }
    });
});


function showVal() {
  alert("current tab selected is: "+ tabIndx);
}

So every time I click on different tabs, I want the showVal() function to fire with the correct value for tabIndx.

Answer 1

Replace this:

alert("Current tab is: "+ this.getIndex()); 

With this:

tabIndx = this.getIndex();
showVal();

That’s all there is to it. There’s nothing special about the $(document).ready() function. It’s just an ordinary JavaScript function that happens to come with jQuery, and that jQuery happens to call when the document is ready.

You can freely call other functions, and access variables declared outside the $(document).ready() just as you can with any JavaScript function.