jquery - 在就绪处理程序中使用字符串调用函数...不起作用

Question

所以你想执行一个名称位于字符串或变量中的函数:

var fn = "foobar";

function foobar() {
    console.log('say something');
}

像这样的答案 - How to execute a JavaScript function when I have its name as a string - 说要这样做:

window[fn](); // outputs 'say something'

但是...这由于某种原因不起作用:

jQuery(document).ready(function($){
    var fn = "foobar";

    function foobar() {
        console.log('say something');
    }

    window[fn](); // undefined
});

这有效，但是:

jQuery(document).ready(function($){
    var fn = "foobar";

    window[fn](); // outputs 'say something'
});

/* I'm outside the ready handler */

function foobar() {
    console.log('say something');
}

我想将我的函数保留在该就绪处理程序中，这样我就不必编写一堆匿名函数来将 jQuery 定义为 $。我该怎么做？

---

更新

这就是我想做的事情:

<div data-control="toggleNext">FAQ</div>
<div>Here's some text that will be hidden until toggled</div>

JS:

jQuery(document).ready(function($){

    function toggleNext() {
        // add ".js_toggled" to .next() element
    }

    $('[data-control]').each(function(){
        var fn = window[$(this).data('control')]; // <-- this don't werk
        if (typeof fn === 'function') fn(this);
    });

});

Answer 1

如果您的函数位于就绪处理程序内，则除非您专门将其设置为这样，否则它将无法在 window 上使用。然而，无论如何，这都是一个坏主意，只需将 window 排除在外，并在文档就绪 block 本地定义您自己的对象即可。

jQuery(document).ready(function($){
    var fn = "foobar", methods = {};
    methods[fn] = function () {
        console.log('say something');
    }
    $('[data-control]').each(function(){
        var fn = methods[$(this).data('control')];
        if (typeof fn === 'function') fn(this);
    });
    //methods[fn](); 
});