如何使用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); 
} 

我希望它做的是調用時PARAM和值添加到我的變量配置功能

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

您只能使用您已獲得的語法傳遞函數引用。要傳遞變量，你需要將你的呼叫包裝在另一個函數中。您可以使用$.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 3

由於您使用jQuery，您可以通過自定義對象的功能，像這樣：

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

再訪問此數據：

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

編輯：
我的答案介紹了非常類似的解決方案（如果不是相同的）其他答案，所以我提出了另一種方法。

Answer 4

您可以修改您的函數，將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); 
    }; 
}