[英]How do I access this variable without a global?
I'm trying to figure out how to make this work. 我正在尝试弄清楚如何使这项工作。
function foo(a) {
$('#this-button').show();
}
function buttonClicked() {
//get access to var a
}
HTML 的HTML
<button id="this-button" onclick="buttonClicked();">
This is a simplified version of what I have but the idea is the same. 这是我所拥有的简化版本,但想法是相同的。
foo takes a variable, and then makes a button visible. foo接受一个变量,然后使按钮可见。 When the button is clicked, I want to do more things with var a.
单击按钮后,我想使用var a做更多的事情。
So like wait until the button is clicked to continue the function? 就像等待按钮被单击以继续功能一样?
Can't seem to figure it out. 似乎无法弄清楚。
Thanks 谢谢
Bind the click handler using jQuery. 使用jQuery绑定点击处理程序。 You can use jQuery.Proxy to bind
a
as an argument: 您可以使用jQuery.Proxy绑定
a
作为参数:
function foo(a) {
$('#this-button').show().click( $.proxy( buttonClicked, null, a ) );
}
function buttonClicked(a) {
// Use a here
}
and remove the JavaScript from your html attribute: 并从html属性中删除JavaScript:
<button id="this-button" />
EDIT, if all you want to do is execute some code after the button is clicked, you can do something like this: 编辑,如果您只想在单击按钮后执行一些代码,则可以执行以下操作:
function foo(a) {
// Code up here executes before the button is clicked
$('#this-button').show().unbind( 'click.foo' ).one( 'click.foo', function ( ) {
console.log( a );
// This code executes after the click, and has access to a
} );
// Code down here executes before the button is clicked
}
You use an event handler content attribute . 您使用事件处理程序的content属性 。 Those have access to:
那些有权访问:
Therefore, you can add the variable as a property of the element: 因此,您可以将变量添加为元素的属性:
function foo(a) { $('#this-button').show().prop('myProp', a); } function buttonClicked(a) { alert(a); } foo(123);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="this-button" onclick="buttonClicked(myProp)">Click me</button>
Of course, using an event handler IDL attribute or an event listener would be a better practice. 当然,使用事件处理程序IDL属性或事件侦听器将是更好的做法。
这就是创建全局对象的原因,或者创建具有可能使用闭包的函数的对象。
You can always access the global scope: 您始终可以访问全局范围:
window.a = a;
But this is generally bad practice. 但这通常是不好的做法。 Can you restructure the code so that both places have a available.
您可以重组代码以便两个地方都可用吗?
Ie 即
var a = {}; //set a
$("#button").click(function(){
// a is available here
});
foo(a);
HTML 的HTML
<button id="this-button">
JS JS
function foo(a) {
$('#this-button').show();
$('#this-button').click(buttonClicked);
function buttonClicked() {
//a can be accesed here
}
}
Put buttonClicked method inside foo to get access of variable a 将buttonClicked方法放在foo中以访问变量a
There's a few different ways to skin this cat but one method is to use a closure to capture the a
variable: 有几个不同的方法对皮肤这只猫但一个方法是使用一个封闭捕获
a
变量:
var myButton = document.getElementById('this-button');
function foo(a) {
myButton.addEventListener("click", buttonClicked(a));
...
}
function buttonClicked(a) {
return function() {
console.log('buttonClicked', a);
}
}
foo('Success!');
In this case, the function buttonClicked
returns a function that captures the value of a
when run by the foo
function. 在这种情况下,函数
buttonClicked
返回一个由foo
函数运行时捕获a
值的函数。 This resulting function is then passed to the event handler
and run when triggered. 然后,此结果函数将传递到
event handler
并在触发时运行。
See the fiddle here: https://jsfiddle.net/ToddT/ae5h1src/ 在这里查看小提琴: https : //jsfiddle.net/ToddT/ae5h1src/
You could use HTML5 localstorage
... 您可以使用HTML5
localstorage
...
function foo(a) {
$('#this-button').show();
localStorage.setItem("variable_a", a); // variable in localstorage =variable_a
}
function buttonClicked() {
localStorage.getItem('variable_a');
//get access to var a
}
HTML5 localstorage allows you to store data on the client browser, and you can access it via getItem()
... more info here: [ w3schools ], [ jenkov.com ] HTML5 localstorage允许您将数据存储在客户端浏览器上,并且可以通过
getItem()
进行访问...更多信息,请访问[ w3schools ],[ jenkov.com ]
Use closure. 使用闭包。
(function(){ var dummy_a; function foo(a) { //$('#this-button').show(); dummy_a = a; } function buttonClicked() { //get access to var a alert(dummy_a) } foo(2) buttonClicked() })();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.