在JavaScript中使用參數調用函數時，如何更改變量？

Question

我的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文件即可更改標簽的外觀，但是無論我如何嘗試，都行不通...任何人都可以幫助我。

Answer 1

當您這樣做時：

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

hoverWidgetOn被立即調用。

你可以這樣做：

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

包裝在匿名函數中將傳遞該函數而不是執行它，並且使用call可以保留this的上下文。

Answer 2

您可以修改函數以將param和value作為參數，並返回一個函數，該函數將在mousenter事件上進行實際更改。

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);
    };
}

Answer 3

您只能使用具有的語法傳遞函數引用。 要傳遞變量，您需要將調用包裝在另一個函數中。 您可以使用$.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);

Answer 4

由於您使用的是jQuery，因此可以將自定義對象傳遞給函數，如下所示：

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

然后訪問此數據：

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

編輯 ：
我的答案對其他答案引入了非常相似的解決方案（如果不相同），因此我提出了另一種方法。