0

我的 javascript 文件中有一个函数：

function hoverWidgetOn (param, value) {
    var element = $("*[data-label]"),
    config = {
        'display':'inline',
        'position':'absolute',
        'top':'6.5em',
        'padding' : '0.5em',
        'background-color':'#383838',
        'color':'white',
        'font-size' : '0.8em',
        'opacity' : '0.9',
        'param' : 'value'
    },
    label = $(this).attr("data-label"),
    d = document.createElement('span'),
    t = document.createTextNode(label);

    d.className = "labelShow";
    $(this).append(d);
    $('.labelShow').append(t).css(config);
}

我想要它做的是在调用函数时将参数和值添加到我的变量配置中

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

因此，此应用程序的用户在其他 javascript 文件中调用此函数时不必更改我的 javascript 文件以更改标签的外观，但无论我如何尝试，这都不起作用......我会很高兴如果任何人都可以帮助我。

4

4 回答 4

3

当你这样做时：

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

hoverWidgetOn被立即调用。

你可以这样做：

element.on('mouseenter', function() { 
    hoverWidgetOn.call(this, 'background-color', 'red') 
});

包装在匿名函数中将传递该函数而不是执行它，并且 usingcall允许您保留this.

于 2013-10-25T15:40:48.850 回答
2

您可以修改您的函数以将参数和值作为参数并返回一个函数，该函数将对鼠标事件进行实际更改。

function hoverWidgetOn (param, value){
    return function() {
        var element = $("*[data-label]");
        var config = {'display':'inline',
            'position':'absolute',
            'top':'6.5em',
                'padding' : '0.5em',
            'background-color':'#383838',
            'color':'white',
            'font-size' : '0.8em',
            'opacity' : '0.9'};
        config[param] = value; //add your param

        var label = $(this).attr("data-label"),
        d = document.createElement('span');
        d.className = "labelShow";
        var t = document.createTextNode(label);
        $(this).append(d);
        $('.labelShow').append(t).css(config);
    };
}
于 2013-10-25T15:42:21.460 回答
1

您只能使用您所拥有的语法传递函数引用。要传递变量，您需要将调用包装在另一个函数中。您可以使用$.proxy该函数来维护范围。尝试这个：

element.on('mouseenter', function() {
    $.proxy(hoverWidgetOn('background-color', 'red')), this);
});

此外，要向config对象添加动态键/值，您需要使用数组表示法。事实上，你在那个函数中有一个奇怪的 jQuery 和 JS 组合。尝试这个：

function hoverWidgetOn (param, value){
    var element = $("*[data-label]");
    var config = {
        'display': 'inline',
        'position': 'absolute',
        'top': '6.5em',
        'padding' : '0.5em',
        'background-color': '#383838',
        'color': 'white',
        'font-size': '0.8em',
        'opacity': '0.9'
    };
    config[param] = value;

    var label = $(this).attr("data-label"),
        $span = $('<span />', { 
            class = 'labelShow',
            text = label
        }).css(config);
于 2013-10-25T15:39:26.993 回答
0

由于您使用的是 jQuery，因此您可以将自定义对象传递给函数，如下所示：

element.on('mouseenter', {param: 'background-color', value: 'red'}, hoverWidgetOn);

然后访问此数据：

function hoverWidgetOn(e) {
    var param = e.data.param;
    var value = e.data.value;
    (...)
}

编辑：
我的答案为其他答案引入了非常相似的解决方案（如果不相同），所以我提出了另一种方法。

于 2013-10-25T15:39:43.367 回答