Question

This should be an easy question for many of you!

Background:
I am having difficulty passing a variable between two functions in javascript using the jQuery library.

Below is a script I am working on that dynamically loads content based on the index of workSnippet. The top function works. The second function does not work. No alert is given, as portfolioCount variable does not seem to exist.

My Question:
How do I pass the variable between the two functions so that when ‘next’ is clicked, I can alert portfolioCount?

Thanks

// set global variable 
var portfolioCount = 0;

// begin on document ready
       $(document).ready(function() {
 // Return the value of the index of workSnippet when clicked and load related content

$(".workSnippet").click(function () {

    //set variable portfolioCount based on index

    var portfolioCount = $(".workSnippet").index(this);

    //load content based on portfolioCount

    $('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount);

    // when loaded, run animation functions 

    $("#work").ajaxComplete(function(){

        setTimeout(invokeMultipleCycle, 200);

        showWork();
        $('#work').cycle(portfolioCount);
        $('#blurbs').cycle(portfolioCount);

        return portfolioCount;
    });

});

// return cycle value when 'next' is clicked

$('#next').click(function () {

    alert(portfolioCount);
});

});

Answer 1

Declare the global thus, outside the functions:

var portfolioCount=0;

Then remove the ‘var’ keyword from this line:

var portfolioCount = $(".workSnippet").index(this);

/sim