Having trouble “passing” variable to functions in loop?

Question

The variable name is not getting passed into these functions. How do pass these variables into these functions? I also tried not using the local variable name at all and just the global variable arrayOfExpansions and that failed also. Thanks for taking a look.

var arrayOfExpansions = ["a", "b", "c", "d", "e", "f", "g"];
$(document).ready(

function () {
    for (var int = 0; int < arrayOfExpansions.length; int++) {
        var name = arrayOfExpansions[int].toLowerCase();
        console.log(name + "4");
        $(function (name) {
            console.log(name + "3");
            $("#" + name + "Slider").slider({
                range: true,
                min: 0,
                max: 10,
                values: [0, 10],
                slide: function (event, ui, name) {
                    console.log(name + "2");
                    $("#" + name + "SliderValue").html(ui.values[0] + " - " + ui.values[1]);
                }
            });
            console.log(name + "1");
            $("#" + name + "SliderValue").html($("#" + name + "Slider").slider("values", 0) + " - " + $("#" + name + "Slider").slider("values", 1));
        });
    }
});

The output of my console.log() s looks like this:

a4
CardClass.js: 98b4
CardClass.js: 98c4
CardClass.js: 98d4
CardClass.js: 98e4
CardClass.js: 98f4
CardClass.js: 98g4
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1
CardClass.js: 100function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
3
CardClass.js: 111function(selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);

}
1

Answer 1

That place in the middle of your outer "ready" handler, where you have this:

$(function(name) {

That's establishing another "ready" handler. That's what "$(someFunction)" does; it's exactly the same as "$(document).ready(someFunction)" in other words.

Therefore, that's simply not going to do anything like what you expect, and it doesn't have a lot to do with parameter passing.

If you want a function to call with some parameter, declare a function:

    function theDaleFunction(name) {
        console.log(name + "3");
        $("#" + name + "Slider").slider({
            range: true,
            min: 0,
            max: 10,
            values: [0, 10],
            slide: function (event, ui, name) {
                console.log(name + "2");
                $("#" + name + "SliderValue").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        console.log(name + "1");
        $("#" + name + "SliderValue").html($("#" + name + "Slider").slider("values", 0) + " - " + $("#" + name + "Slider").slider("values", 1));
    }

Put that somewhere, perhaps before your "for" loop entirely or perhaps outside the "ready" handler; depends on other stuff. Then call it in your loop:

      theDaleFunction( name );