Question

I’m passing a config object with names for each slide to a function that instantiates a jQuery tools scrollable. I want the URL in the location bar to match the active tab id. I have it working so that passing the URL with the name in will navigate to the correct slide (that’s at the bottom of the provided code), but I’m trying to get the URL updating when the slide changes. I know what I need to do to get that, but not how to do that, which is like in the question title.. pass a value to an object and get a property that has that value.

$(function () {
    Scrollablenav.init({
        "#tulips": 0,
        "#daffodils": 1,
        "#zebras": 2,
        "#horseshoes": 3
    });
});

Scrollablenav.init = function(config){
    var scroller = $(".scrollable").scrollable({
        circular: true,
        onSeek: function (event) {
            parent.location.hash = function(){
            //something that looks at config, sends it the value of the current slide and returns corresponding property name
            }
        }
    }).navigator({
            navi: '#slideTabs',
            naviItem: 'a',
            activeClass: 'current',
            history: true
    }).data('scrollable');

    if (!isNaN(config[location.hash])){
        scroller.seekTo(config[location.hash], 0);
     }
}

Answer 1

Can you change the format of your config? In other words, can we do:

$(function () {
    Scrollablenav.init({
        "#tulips": { Key: 'tulips', Index: 0 },
        "#daffodils": { Key: 'daffodils', Index: 1 },
        "#zebras": { Key: 'zebras', Index: 2 },
        "#horseshoes": { Key: 'horseshoes', Index: 3 }
    });
});

If that doesn’t work, you can make a new object somewhere that maps the indexes back to the key:

var keys = {
   1: 'tulips',
   2: 'daffodils',
   3: 'zebras',
   4: 'horseshoes',
};

UPDATE:

You could also build this config dynamically:

$(function () {
    var values = ['#tulips', '#daffodils', '#zebras', '#horseshoes'];
    var config = {};

    for(var i = 0; i < values.length; i++)
    {
       config[values[i]] = { Index: i, Key: values[i] };
    }

    Scrollablenav.init(config);
});