How to dynamically generate waypoints using jquery waypoints?

Question

So basically, I'm trying to create dynamic waypoints for this menu I am creating. I have several waypoints that need to be created(30+). Here is what I have so far:

//arrays
var contentArray = new Array(
    "#1790", "#1792", "#1794", "#1720", "#1724", "#1726", "#1728", "#1647", "#1649", "#1651", "#1660", "#1662", "#1664", "#1667",
    "#1669", "#1671", "#1678", "#1680", "#1683", "#1686", "#1688", "#1690", "#1692", "#1694", "#1696", "#1698", "#1700", "#1702",           "#1704", "#1706", "#1708", "#1710", "#1712", "#1714", "#1716", "#1680-1", "#1680-2" 
);

var tabArray = new Array(
    "1739", "1740", "1741", "1742", "1743", "1744", "1745", "1736", "1748", "1749", "1750", "1751", "1752", "1753",
    "1754", "1755", "1757", "1758", "1761", "1763", "1764", "1765", "1766", "1767", "1768", "1769", "1770", "1772",
    "1773", "1774", "1775", "1776", "1779", "1780", "1781", "1759", "1760"
);

for(var i=0; i<contentArray.length; i++){
    $(contentArray[i]).waypoint({
        handler: function (direction) {

        if(direction == "down") {
            $("#menu-item-" + tabArray[i]).addClass("red-bg");
        } else {
            $("#menu-item-" + tabArray[i]).removeClass("red-bg");
        }
    },
    offset: 0
    })
}

The arrays may look a little funky but each index of each array is supposed to correspond with the other array index. However, each time I run this, the tabArray always returns undefined since it is out of scope. Is there any way to get around issue? Any and all help is appreciated! Thanks!

Answer 1

Blex's answer is fine, but it is only of a certain scope. The issue is revolves around how closures work, and how ephemeral data can be lost. The best/most useful solution is to create object closures like this fully. Something like the following:

function createObjectClosure(item){
  return {
    handler: function(direction) {         
        $("#menu-item-" + item).toggleClass("red-bg", direction == "down");
     },
      offset:0
   }
}
for(var i=0; i<contentArray.length; i++){
    $(contentArray[i]).waypoint(createObjectClosure(tabArray[i]));
}

Or (pretty much the same code... many people like this kind of inline function, but I think it is harder for people to follow):

for (var i = 0; i < contentArray.length; i++) {
    $(contentArray[i]).waypoint(
        function(item) {
            return {
                handler: function(direction) {
                  $("#menu-item-" + item).toggleClass("red-bg", direction == "down");
                },
                offset: 0
            }
        }(tabArray[i])
    )
}

Answer 2

You can work around this by adding the corresponding "tab" as an attribute to it, like data-tab :

for(var i=0; i<contentArray.length; i++){
    // Add the data-tab to the element and create waypoint
    $(contentArray[i]).attr('data-tab', tabArray[i]).waypoint({
        handler: function (direction) {
            // Grab the data-tab attribute and use it
            var tab = $(this.element).data('tab');
            // You can toggle it without an if statement
            $("#menu-item-" + tab).toggleClass("red-bg", direction == "down");
        },
        offset: 0
    })
}