[英]How to change a variable when calling a function with parameters in javascript?
I have a function in my javascript file: 我的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);
}
What I want it to do is to add param and value to my variable config when calling function 我想要做的是在调用函数时将参数和值添加到变量配置中
element.on('mouseenter', hoverWidgetOn('background-color', 'red'))
so the user of this application won't have to change my javascript file in order to change label's look while calling this function in other javascript file, but no matter how I try, this doesn't work... I would be glad if anyone can help me. 因此,此应用程序的用户无需在其他javascript文件中调用此函数时更改我的javascript文件即可更改标签的外观,但是无论我如何尝试,都行不通...任何人都可以帮助我。
when you do this: 当您这样做时:
element.on('mouseenter', hoverWidgetOn('background-color', 'red'))
hoverWidgetOn
is called immediately. hoverWidgetOn
被立即调用。
You can do this: 你可以这样做:
element.on('mouseenter', function() {
hoverWidgetOn.call(this, 'background-color', 'red')
});
Wrapping in an anonymous function will pass the function instead of executing it, and using call
allows you to preserve the context of this
. 包装在匿名函数中将传递该函数而不是执行它,并且使用call
可以保留this
的上下文。
You can modify your function to take param and value as arguments and return a function that will make an actual changes on mousenter event. 您可以修改函数以将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);
};
}
You can only pass the function reference with the syntax you've got. 您只能使用具有的语法传递函数引用。 To pass variables, you need to wrap your call in another function. 要传递变量,您需要将调用包装在另一个函数中。 You can use $.proxy
to maintain the scope within that function. 您可以使用$.proxy
来维护该函数中的范围。 Try this: 尝试这个:
element.on('mouseenter', function() {
$.proxy(hoverWidgetOn('background-color', 'red')), this);
});
Also, to add a dynamic key/value to your config
object you need to use array notation. 另外,要将动态键/值添加到config
对象中,您需要使用数组符号。 In fact you have an odd mix of jQuery and JS in that function. 实际上,您在该函数中混用了jQuery和JS。 Try this: 尝试这个:
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);
Since you're using jQuery, you can pass custom object to the function, like this: 由于您使用的是jQuery,因此可以将自定义对象传递给函数,如下所示:
element.on('mouseenter', {param: 'background-color', value: 'red'}, hoverWidgetOn);
then to access this data: 然后访问此数据:
function hoverWidgetOn(e) {
var param = e.data.param;
var value = e.data.value;
(...)
}
EDIT : 编辑 :
My answer introduced very similiar solution (if not the same) to other answers so I proposed another approach. 我的答案对其他答案引入了非常相似的解决方案(如果不相同),因此我提出了另一种方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.