如何在沒有全局變量的情況下訪問此變量？

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