对象[object Object]的属性'$ .fn.toggleHeightAndOpacity'不是函数

Question

我想打电话给一个变量的函数名，因为我已经使用类似的代码从以前做过很多次在这里与

<script type="text/javascript">
    $.fn.toggleHeightAndOpacity = function(show) {
        $(this).stop(true,false).animate({
            opacity: (show)?'show':'hide',
            height: (show)?'show':'hide'
        },
        function(){
            $(this).css('display', (show)?'auto':'none')
        })
    };

...

ws.onmessage = function (evt) {
    var data = JSON.parse(evt.data);
    if(evt.data.type = 'function'){
        var parameters;
        try{
            parameters = JSON.parse(data.parameters);
        }
        catch(e)
        {
            parameters = data.parameters;
        }
        $('#'+data.id)[data.function](parameters)
    }
};

但我一直得到Uncaught TypeError: Property '$.fn.toggleHeightAndOpacity' of object [object Object] is not a function即使从我的WebSocket服务器返回的JSON是{"function":"$.fn.toggleHeightAndOpacity","id":"container","parameters":true,"type":"function"} 。

container存在于我的html中，并加载了jQuery。

怎么解决这个问题？

Answer 1

可以使用点或括号表示法访问对象，因此这两个是相同的

object.key

object['key']

由于jQuery选择器和方法是对象，就像javascript中的其他所有东西一样，它们可以以相同的方式访问，所以这两个是相同的

$('#element').fadeIn();

$('#element')['fadeIn']();

这意味着可以使用这两种方法访问插件

$('#'+data.id)['toggleHeightAndOpacity'](parameters);

$('#'+data.id).toggleHeightAndOpacity(parameters);

所以，如果从服务器返回的数据真的是

{"function":"$.fn.toggleHeightAndOpacity", ...

你真的在做

$('#'+data.id)['$.fn.toggleHeightAndOpacity'](parameters)

这看起来不对，它应该是

$('#'+data.id)['toggleHeightAndOpacity'](parameters)

所以更改服务器端代码以输出没有$.fn的函数名称。
使用function作为键看起来有点小，因为它是javascript中的保留关键字，所以我会养成不命名键或变量function的习惯