Javascript閉包，用於“緩存” texbox值

Question

我為以下代碼創建了一個小提琴 。 我想要實現的是總是在單擊第一個按鈕時獲取“第一個文本框”的值，而在單擊第二個按鈕時卻獲取“第二個文本框”的實際值，但我無法做到這一點。 有什么幫助嗎？

使用Javascript

  var mapping = function (id, refresh) {
     var ret = $(document.getElementById(id)).val(),
         func = function (refresh) {
             if (refresh) ret = $(document.getElementById(id)).text();
             return ret;
         };

     return {
         func: func
     };
 };

 var foo = {
     firstElement: function (refresh) {
         return new mapping('firstTextbox', refresh);
     },

     secondElement: function (refresh) {
         return new mapping('secondTextbox', refresh);
     }
 };

 $(document).ready(function () {
     $('#firstButton').on('click', function () {
         $('#container').html(foo.firstElement(false));
     });

     $('#secondButton').on('click', function () {
         $('#container').html(foo.secondElement(true));
     });
 });

HTML

<input type="textbox" id="firstTextbox" value="First textbox" />
<button id="firstButton">First button</button>
<br />
<input type="textbox" id="secondTextbox" value="Second textbox" />
<button id="secondButton">Second button</button>
<br />
<div id="container">Here comes the result</div>

謝謝

Answer 1

http://jsfiddle.net/kJ3uU/3/

$('#firstButton').on('click', function () {
     $('#container').text(foo.firstElement(false).func);
 });

 $('#secondButton').on('click', function () {
     $('#container').text(foo.secondElement(true).func);
 });

另外，在您的小提琴演奏中，您碰巧在foo對象的兩個元素中都有'firstTextBox'字符串。

Answer 2

每次單擊時，您都在調用foo() ，它確實會創建一個新的mapping -從現在起可能不會刷新，但是每次都會使用當前值進行初始化。 使用此代替：

$(document).ready(function () {
    var getFirstElement = mapping('firstTextbox', false);
    var getSecondElement = mapping('secondTextbox', true);

    $('#firstButton').on('click', function () {
        $('#container').html(getFirstElement.func());
    });

    $('#secondButton').on('click', function () {
        $('#container').html(getSecondElement.func());
    });
});

（演示更新）