0

JavaScrit関数のクロージャスコープに苦労しています。以下の関数は、異なる画像で3つの見本を作成し（これは機能します）、これらをクリックすると、スタイルシートを切り替える必要があります。

switchTheme問題は、ステップスルーthemeすると最初の関数の変数が変更されていることを示していても、同じオブジェクトが関数に渡されることです。

var switcherConfig = {
    themes: 
        {
            'Orangeness': {
                folder: 'ui-lightness'
            },
            'Red Matter': {
                folder: 'blitzer'
            },
            'Flubber': {
                folder: 'south-street'
            }
        }
}
function createThemeSwitcher(placeholderSelector) {
    for (var themeName in switcherConfig.themes) {
        var theme = switcherConfig.themes[themeName];
        var anchor = $('<a/>')
            //.text(theme.title)
            .attr('title', theme.title)
            .attr('href', '#')
            .on('click', function () { switchTheme(theme); })
            // append to DOM etc
    }
}
function switchTheme(theme) {
    var themeDirectory = switcherConfig.baseDirectory + '/' + theme.folder + '/';
    // 'theme' variable is always the last in my 'themes' config object
}
4

3 に答える 3

3

によって使用される値は、関数が呼び出されたときswitchTheme(theme)の状態になりthemeます。値は、その匿名コールバックを作成した時点ではバインドされていません。クロージャーを使用して、その特定の値をバインドします。

.on('click', (function (t) {
    return function () { switchTheme(t); };
})(theme))
于 2012-09-25T09:02:45.450 に答える
0

動く

var theme = switcherConfig.themes[themeName];

クリック機能

function createThemeSwitcher(placeholderSelector) {
    for (var themeName in switcherConfig.themes) {

        var anchor = $('<a/>')
            //.text(theme.title)
            .attr('title', theme.title)
            .attr('href', '#')
            .on('click', function () { 
                         var theme = switcherConfig.themes[themeName];
                         switchTheme(theme); 
            })
            // append to DOM etc
    }
}
于 2012-09-25T09:03:18.937 に答える
0

クロージャーを作成する代わりに、.data以下のように使用できます (単なる代替手段):

var switcherConfig = {
    themes: 
        {
            'Orangeness': {
                title:"Orangeness",
                folder: 'ui-lightness'
            },
            'Red Matter': {
                                title:'Red Matter',
                folder: 'blitzer'
            },
            'Flubber': {
                title:'Flubber',
                folder: 'south-street'
            }
        }
}
function createThemeSwitcher(placeholderSelector) {
    for (var themeName in switcherConfig.themes) {
        var theme = switcherConfig.themes[themeName];
        var anchor = $('<a/>')
            .data("theme",theme)
            .attr('title', theme.title)
            .attr('href', '#')
            .html(theme.title)
            .on('click', function () { switchTheme($(this).data("theme")); })
            $("body").append(anchor);
    }
}
function switchTheme(theme) {
    alert(theme.title)
}

デモ

于 2012-09-25T09:12:24.670 に答える