如何在没有全局变量的情况下访问此变量？

Question

我正在尝试弄清楚如何使这项工作。

function foo(a) {
  $('#this-button').show();
}

function buttonClicked() {
  //get access to var a
}

的HTML

<button id="this-button" onclick="buttonClicked();">

这是我所拥有的简化版本，但想法是相同的。

foo接受一个变量，然后使按钮可见。 单击按钮后，我想使用var a做更多的事情。

就像等待按钮被单击以继续功能一样？

似乎无法弄清楚。

谢谢

Answer 1

使用jQuery绑定点击处理程序。 您可以使用jQuery.Proxy绑定a作为参数：

function foo(a) {
    $('#this-button').show().click( $.proxy( buttonClicked, null, a ) );
}

function buttonClicked(a) {
    // Use a here
}

并从html属性中删除JavaScript：

<button id="this-button" />

编辑，如果您只想在单击按钮后执行一些代码，则可以执行以下操作：

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

}

Answer 2

您使用事件处理程序的content属性 。 那些有权访问：

• 元素中定义的属性（如果有）
• 在元素8的表单所有者中定义的属性（如果有）
• 文档中定义的属性
• 全局对象中的属性（即全局变量）。

因此，您可以将变量添加为元素的属性：

 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> 

当然，使用事件处理程序IDL属性或事件侦听器将是更好的做法。

Answer 3

这就是创建全局对象的原因，或者创建具有可能使用闭包的函数的对象。

Answer 4

您始终可以访问全局范围：

window.a = a;

但这通常是不好的做法。 您可以重组代码以便两个地方都可用吗？

即

var a = {};  //set a

$("#button").click(function(){
    // a is available here
});

foo(a);

Answer 5

的HTML

<button id="this-button"> 

JS

   function foo(a) {
      $('#this-button').show();

      $('#this-button').click(buttonClicked);

    function buttonClicked() {
      //a can be accesed here
    }

    }

将buttonClicked方法放在foo中以访问变量a

Answer 6

有几个不同的方法对皮肤这只猫但一个方法是使用一个封闭捕获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!');

在这种情况下，函数buttonClicked返回一个由foo函数运行时捕获a值的函数。 然后，此结果函数将传递到event handler并在触发时运行。

在这里查看小提琴： https : //jsfiddle.net/ToddT/ae5h1src/

Answer 7

您可以使用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允许您将数据存储在客户端浏览器上，并且可以通过getItem()进行访问...更多信息，请访问[ w3schools ]，[ jenkov.com ]

Answer 8

使用闭包。

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